{ //el adalah current element\n if(el>10)\n return el; //return menjadi array lagi yang el hanya diatas 10\n}); \ncontoh 2 object : \nlet obj = [{name:\"taufik\",age:22,catLover:true},{name:\"akbar\",age:23,catLover:false},{name:\"maliki\",age:24,catLover:true}];\nobj.filter(el=>{\n if(el.age>22)\n return el; //return menjadi array lagi yang el.age hanya diatas 22\n});\n \narr.map() menggunakan anonymos function untuk mengambil tiap data di array\nberfungsi untuk meng edit atau mengaplikasikan rule baru di tiap element \ncontoh ; \narr.map((el)=>{ //el adalah current element\n val+10;\n return el; // return 1 index yang berkenaan dengan val element\n}); \ncontoh 2 pada object: \nlet obj = [{name:\"taufik\",age:22,catLover:true},{name:\"akbar\",age:23,catLover:false},{name:\"maliki\",age:24,catLover:true}];\nobj.map(el=>{ \n el.age+=30; setiap age di object tambah 30\n});\n#return spesifik key \nobj.map(el=>{\n let newObj ={};\n for(key in el)\n {\n if(key==\"name\")\n newObj[key]=el[key];\n }\n return newObj; // mengembalikan object yang hanya memiliki nama \n});\n\n \narr.reduce() // membutuhkan minimal 2 arguments pertama current element, kedua next element\narr.reduce((el,nextEl)=>{\n return nextEl>el\n});\n \nnested array method\nlet arrNest = [\n {nama:\"taufik\",hobby:[\"traveling\",\"playing games\"],age:22},\n {nama:\"akbar\",hobby:[\"reading books\"],age:23},\n {nama:\"maliki\",hobby:[\"running on the wild\"],age:24}\n];\n\nlet data = arrNest.filter(e=>e.age>22).map(e=>{return e.age= e.age+2}).filter(e=>e>25));\n \narr.some() // mencek semua el pada array dengan kondisi apabila salah satu atau beberapa element berbeda\narr.some(el=>{\n if(typeof el == \"number\") // jika salah satu el ada type number maka return false\n return false ;\n});\n \narr.every // mencek semua el dengan kondisi semua el harus sama\narr.every((el)=>{\n if(typeof el != \"number\") // jika semua el tidak sama dengan number maka false\n return false;\n})\n \nArray.of(Object) // menjadikan object ke dalam bentuk array\nArray.of(person1); // hasil nya [{name:\"taufik\",age:22}];\n \nArray.from(node) // menjadikan HTML OBJECT menjadi node HTML array\nArray.from(document.getElementsByClassName(\"tehee\"));\n \ncara membuat array_diff method\nfunction array_diff(array1, array2) {\n return array1.filter(function(elm) {\n return array2.indexOf(elm) === -1;\n })\n}",
"description": "array methods",
"scope": ""
},
"javascript object referrence type": {
"prefix": "QQ:js-note-object-refference-type",
"body": "Reference type\n\n\n[] ===[] //false \n[2] === [2] // false\n{} === {} // false\nVar object1= {value:10};\nVar object2= object1;\nVar object3= {value:10};\nobject1 === object2 // true \nobject1 === object 3 // false \n -----------------------------\nobject1 ==============> | BOX |\nobject2 ==============> |___________________________|\n\nobject1 dan object2 reference ke box of object yang sama \n\nobject1.value =15 ;\nobject2.value // 15 , akan mengikuti object1.value karena object2 dan object1 mereference ke box yang sama \njika \nobject2.value =20;\nmaka \nobject1.value //20 , akan mengikuti value yang sama karena reference ke box yang sama",
"description": "object refference type",
"scope": ""
},
"javascript object cara membuat object": {
"prefix": "QQ:js-note-class/function/factory-object",
"body": "Instatiation\n\n\n1. menggunakan function builder \n\n\nlet Person = function(name,age,catLover,1togo,address){\n this.name=name;\n this.age=age;\n this.catLover=catLover;\n this.walkin = function(){};\n this.1togo = null;\n this.address=address;\n}\natau \nlet Person = function(name,age,catLover,1togo,address){\n Object.assign(this,{name,age,catLover,1togo,address},{\n walkin(){\n\n }});\n}\n#prototypenya \nPerson.prototype.howToWalk = function(){\n //walking\n}\n#inheritance \nlet Person2 = function(name,age,catLover,1togo,address){\n Person.call(this,name,age,catLover,walkin,1togo,address);\n}\nObject.setPrototypeOf(Person2.prototype,Person.prototype);\n\nlet person1 = new Person2(\"taufik\",22,true,null,{ noRumah: 84,jalan:\"jl.Brigjend H.Hasan. Basrie\" });\n\n2. menggunakan class builder \n\n\n\nclass Person {\n constructor(name,age,catLover,1togo,address){\n Object.assign(this,name,age,catLover,1togo,address);\n }\n walkin(){\n //function walking\n }\n}\n#inheritance \nclass Person2 extends Person{\n constructor(name,age,catLover,walkin,1togo,address){\n super(name,age,catLover,walkin,1togo,address);\n }\n}\nlet person1 = new Person2(\"taufik\",22,true,null,{ noRumah: 84,jalan:\"jl.Brigjend H.Hasan. Basrie\" });\n\n\n3. menggunakan object factory \n\n\nlet Person = function(obj,name,age,catLover,1togo,address){\n return Object.assign({},obj,{name,age,catLover,1togo,address},{\n walking(){\n //fungsi walking\n }\n });\n}\n#hirarky\nlet Hobby = function(obj,hobby){\n return Object.assign({},obj,{hobby},{\n getHobby(){\n\n }\n });\n}\nlet person1 = Person(Hobby({},\"travelling\",\"taufik\",22,true,null,{ noRumah: 84,jalan:\"jl.Brigjend H.Hasan. Basrie\" }));",
"description": "class function factory object",
"scope": ""
},
"javascript custom object property": {
"prefix": "QQ:js-note-custom-object-propert",
"body": "Membuat custom property dengan authorization\n\n\nlet obj = {};\nObject.define.properties(obj,{\n prop1{\n value:String|Number|Object|function .dll,\n configurable:true|false,\n enumerable:true|false,\n writable:true|false\n }\n});\n",
"description": "custom object property",
"scope": ""
},
"javascript konsep prototyping": {
"prefix": "QQ:js-note-konsep-prototyping",
"body": "KONSEP prototyping dan inheritance\n\n\nsetiap object dijavascript memiliki prototype nya sebagai constructor yang membuat object itu menjadi object utuh ,\ncontoh \nObject < window default variable\nmemiliki method .keys() .. \ndan \nlet newObj = new Object();\ndapat memanggil method .keys() karena newObj mewarisi method .keys() dari Object windows secara prototype \nprototype adalah proses dimana children mereference value dari parent \nnewObj.prototype.info = function(){ return `this info`}\ndidalam newObj akan memiliki sebuah method yang terletak dalam prototype \nnewObj\n ...prototype\n ...info() \nlet newObj2={};\nObject.setPrototypeOf(newObj2.prototype,newObj.prototy);\nnewObj2\n ...prototype\n ...newObj\n ...prototype\n ...info()\n ...Object\nartinya apabila newObj2 tidak memiliki method info() dia akan mencari ke prototype dari dirinya yang memiliki method info().\nnewObj3\n ...prototype \n ...newObj2 \n ...prototype \n ...newObj\n ...prototype\n ...info() \napabila newObj3 adalah prototype dari newObj2 maka dia juga dapat meakses method info karena info dapat diakses newObj2 melalui link prototypenya ke newObj",
"description": "konsep prototype",
"scope": ""
},
"javascript promise": {
"prefix": "QQ:js-note-promise",
"body": "Promise\n\n\nPromise adalah Object yang memproses suatu data dan tidak akan mereturn data sebelum resolve atau reject terjadi .\ncontoh : \nlet promise1 = new Promise((resolve,reject)=>{\n iftrue){\n resolve\"\"());\n }\n reject\"\"());\n});\npromise1(res=>{return res});\n\nPromise.all([promise1,promise2,promise3])\n.then(va=>{(va[0],va[1],va[2])})\n.catch(err=>{log(err)})\n\nconst urls = [\n 'https://swapi.co/api/people/1',\n 'https://swapi.co/api/people/2',\n 'https://swapi.co/api/people/3',\n 'https://swapi.co/api/people/4'\n]\nPromise.all(urls.map(url=> fetch(url).then(res=>res.json())))\n.then(val=>{val.forEach(el=>{console.log(el)})})\n",
"description": "konsep promise",
"scope": ""
},
"javascript async wait": {
"prefix": "QQ:js-note-async-wait",
"body": "Async Await\n\n\nAsync Await adalah sebuah function yang dibangun dalam keadaan promise , async membuat sebuah program berjalan pada asynchronously \ncontoh :\nasync function playerStart(){\n const firstMove = await movePlayer(100, 'Left');//pause\n await movePlayer(400, 'Forward');//pause\n await moeePlayer(10, \"Right\");\n}\n\ncontoh2 : \nasync function fetchUser(){\n const resp = await fetch('https://swapi.co/api/people/1');\n const data = await resp.json();\n console.log(data);\n}\n\ncontoh 3:\nconst urls = [\n 'https://swapi.co/api/people/1',\n 'https://swapi.co/api/people/2',\n 'https://swapi.co/api/people/3',\n 'https://swapi.co/api/people/4'\n]\nasync function fetchUser(){\n const [hasil1,hasil2,hasil3,hasil4] = await Promise.all(urls.map(url=>{\n return fetch(url).then(res=>res.json())\n }));\n console.log(hasil1);\n console.log(hasil2);\n console.log(hasil3);\n console.log(hasil4);\n}\ncontoh 4 catch error : \n\nasync function fetchUser(){\n try{\n const [hasil1,hasil2,hasil3,hasil4] = await Promise.all(urls.map(url=>{\n return fetch(url).then(res=>res.json())\n }));\n } catch(error){\n console.log(error);\n }\n}",
"description": "async waits",
"scope": ""
},
"javascript dom manipulation": {
"prefix": "QQ:js-note-dom-manipulation",
"body": "list data selector\ndocument.getElementById // menghasilkan html document\n.getElementsByCLassName// menghasilkan list HTML document tidak dapat di iterat kecuali diconvert dlu dengan Array.from\n.getElementsByTagName // menghasilkan list HTML document tidak dapat di iterat kecuali diconvert\n.querySelector //menghasilkan html document\n.querySelectorAll // menghasilkan node list of html document dapat di iterat dengan forEach\nel.parentNode , untuk mengambil parent element dari target element perhatikan parentNode tanpa \"s\" diakhir kalimat\nel.childNodes(0), untuk mengambil child element dari target ,perhatikan ada \"s\" diakhir kalimat childNodes\nel.nextSibling , untuk mengambil element tetangga dari element target",
"description": "dom manipulation",
"scope": ""
},
"javascript object method": {
"prefix": "QQ:js-note-object-methods",
"body": "LIST METHOD\n.textContent = digunakan untuk mengganti text dalam element yang di dibaca sebagai string\n.innerHTML = digunakan untuk menggantikan text / content dalam element yang dibaca sebagai html string misal ditaruh tag maka tag dibaca sebagai element html\n.classList.add = untuk menambah class di element\n.classList.remove = untuk menghapus class di element\n.classList.toggle(\"nama kelas\",boolean) = apabila element belum memiliki kelas maka akan ditambahkan , apabila sudah memiliki kelas maka akan dihapus .. return true jika ada , false jika tidak ada\nbtn1.onclick = function(){\n let btn1ev = btn1.classList.toggle(\"clicked\");\n if(btn1ev)\n {\n this.textContent =\" with a class added\";\n }else{\n this.textContent =\" without a class added\"\n }\n}\n \n.classList.style.(nama css property yang ingin di edit) = \"value dari property yang di edit\"\n.appendChild() , digunakan untuk menambahkan element di index terakhir pada list element target\nparent.appendChild(newElement);\ncontoh \n\nlet span = document.createElement('span');\ndocument.querySelector(\"#parentEl\").appendChild(span);\nhasilnya\n\n \n.insertBefore() digunakan untuk menambahkan new element diawal atau di tag baru element\nContoh menambahkan element sebelum target\nparent.insertBefore(newELement, targetEle);\n\nlet span = document.createElement('span');\nlet target = document.querySelector('.childEle');\ndocument.querySelector(\"#parentEl\").insertBefore(span,target);\n\nContoh menambahkan element setelah target\nparent.insertBefore(newELement, targetEle);\n\nlet span = document.createElement('span');\nlet target = document.querySelector('.childEle');\ndocument.querySelector(\"#parentEl\").insertBefore(span,target.nextSibling);\n\nContoh menambahkan element setelah diluar tag parent\nparent.insertBefore(newELement, targetEle);\n\n\nlet span = document.createElement('span');\nlet target = document.querySelector('.childEle');\ndocument.querySelector(\"#parentEl\").parentNode.insertBefore(span,document.querySelector(\"#parentEL\"));\n.getAttribute() , untuk mengambil attribute pada element\n.setAttribute(\"attribute\",\"value attribute\") untuk menset attribute pada element\n.click() , digunakan untuk mengclick element secara langsung",
"description": "object methods",
"scope": ""
},
"javascript jquery method": {
"prefix": "QQ:js-note-jquery-method",
"body": "JQUERY\n\nsetiap selector menggunakan css selector,\nList Method \n\n \n.css() > dapat digunakan secara tunggal atau dengna menaruh object style argument \n\n contoh 1 : $$('a').css(\"font-size\",\"20px\") \n\n contoh 2 : $$('a').css({\n fontSize:\"20px\",\n \"font-weight\":\"bold\"\n });\n \n\n \n.addClass dan .removeClass atau gunakan toggle dengan argument true untuk status selalu add class , dan false selalu remove class \n\n contoh : $$('div').addClass(\"animated fadeIn\");\n\n $$('div').removeClass('fadeIn');\n contoh : $$('div').toggle(\"animated fadeIn\"); \n \n\n \n.val() sama halnya dengan vanila js .value , set atau get value dari element \n\n contoh: $$('input:nth-of-type(1)').val(05101995) \n\ncontoh 2 : perbandingan vanila dengan jquery \n\n\ndocument.querySelector('select:first-of-type').addEventListener('change',function(e){\n document.querySelectorAll('option').forEach(opt=>{\n if(e.target.value==opt.value){\n document.querySelector('input:first-of-type').value=opt.textContent;\n }\n });\n});\n$$('select:first-of-type').on('change',function(e){\n $$('option').each((index,opt)=>{\n if(opt.value==e.target.value){\n $$('input:first-of-type').val(opt.textContent);\n }\n })\n});\n\n \n.text(), sama halnya dengan vanila js .textContent menset text ke dalam content element\n \ncontoh : $$('p').text(\"taufik akbar maliki\");\n \n\n \n.attr(), sama halnya dengan vanila js .setAttribute() dan getAttribute() , jquery .attr() dapat men set dan men get attr dari elemnt\n \n contoh : $$('input:not(.input2)').attr(\"name\",\"password\");\n\n contoh 2 : $$('input:not(.input2)').attr({\n \"name\":\"password\",\n \"id\":\"input2\",\n \"placeholder\":\"inputanya\"\n });\n \n\n \n.html(), sama halnya dengan vanila js .innerHTML() dapat menset html text ke dalam content element\n \ncontoh : $$('div:first-of-type').html(\"wokeee\");\n \n\n \n.width(), sama halnya dengan vanila js .offsetWidth mendapatkan width lebar dari element\n\n \n.height(), sama halnya dengan vanila js .offsetHeight mendapatkna height tinggi dari element\n\n \n.append(), sama halnya dengan vanila js .appendChild memasukkan new created element ke dalam parent element\n\n \n.on() , sama halnya dengan vanila js addEventListener(), membuat sebuah event listener pada element\n \nnote* : untuk selalu update event pada element yang baru dibuat , gunakan parent element sebagai event terjadi dan target children element yang ingin diberikan tindakan\n \n\n \n.off(), sama halnya engan vanila js removeEventListener(), menghapus event listener pada element\n\n \n.click(), sama halnya dengan vanila js .click() dan onclick mengclick secara langsung sebuah element\n\n \n.keypress(), sama halnya dengan vanila js .onkeypress di javascript = event akan firing diatantara keydown dan keyup\n\n event key yang dihasilkan akan menghasilkan key text setelah modif , misal shift+a , maka hasilnya A \n \n\n \n.fadeIn(), .fadeOut(), .delay() fadeIn digunakan untuk fire opacity animation untuk memunculkan konten, fadeout untuk menghilangkan konten, .delay(ms) untuk menambah delay antara animasi \n\n contoh 1 : \n\n $$('.boxes').fadeOut(500,function(){\n console.log('Fade Completed'); //fire after fadeOut selesai\n $$(this).remove();\n });\n \n\n $$('.boxes').fadeOut(500).delay(600).fadeIn(300);\n \n\n $$('.boxes').fadeToggle(500); // akan meng add fadeIn atau fadeOut tergantung kondisi element\n\nevent.sForwardPr;//pause\n await moeePlayer()opaga10, \"Right\"t;ion() , dapat digunakan di javascript juga , \n\n berguna untuk menghentikan child ele\n ment event click bubbling up ke parent element click event \n\n \n versi javascript sebelumnya event.canceBubble = true;",
"description": "jquery methods",
"scope": ""
},
"javascript how javascript work": {
"prefix": "QQ:js-note-how-javascript-work",
"body": "HOW DOES JAVSCRIPT WORK?\n\n1. what is a program \n> program harus dapat melakukan sesuatu yang sederhana seperti \n - allocate memory // menyimpan sesuatu ke dalam memory \n - parse and execute // me read dan write sesuatu yang ada dalam memory \n2. browser memiliki v8 engine yang berfungsi sebagai program \n> v8 engine dapat melakukan allocate memory dan parse ,execute dari instruction \n - Memory Heap << memory allocation terjadi \n contoh :\n const a=1; < kita me allocate memory a dengan value 1 \n *setiap proses allocate memory terjadi maka tempat penampungan di memory heap akan terisi \n dan memory heap memiliki batas juga , apabila keluar dari batas maka akan mengakibatkan memory leak .\n memory leak juga terjadi pada un used variable \n contoh const b; // b tidak digunakan\n itu lah alasan kenapa global variable buruk , tidak terjadi clean up pada memory di global variable berbeda \n dengan scope local variable yang akan di clean saat scope itu selesai\n - Call Stack << parse dan execute terjadi \ncontoh1\nconsole.log('1');\nconsole.log('2');\n \n| |\n| |\n| |\n| console.log('1')| proses pertama execute dan hapus \n\n| |\n| |\n| |\n| console.log('2')| proses kedua execute dan hapus \n\ncontoh 2 :\nconst one = () =>{\n const two = () => {\n console.log(4);\n }\n two();\n}\n\n| |\n| |\n| |\n| one() | one di read ke call stack\n\n| |\n| |\n| two() | two di read ke call stack \n| one() |\n\n| |\n| console.log('4')| console.log('4') di read ke call stack \n| two() |\n| one() |\n\nsetelah mencapai akhir dari scope maka akan di execute dari stack teratas \n\n| |\n| console.log('4')| di execute dan dihapus\n| two() |\n| one() |\n\n| |\n| | \n| two() | di execute dan dihapus\n| one() |\n\n| |\n| | \n| |\n| one() | di execute dan dihapus\n\nkonspe ini dinamakan first In last Out\n\nJAVASCRIPT\n\n\nadalah single threaded artinya hanya dapat melakukan read dan execute per 1 stack ;\nbahasa lain dapat melakukan multiple stack itu disebut multi thread \n\nsynchronous programming artinya sama halnya bagaimana single threaded berjalan.\narinya menjalankan 1 step per stack line of code .\nStack juga memiliki batasan dan apabila melewati batasan tersebut maka disebut stackOverflow \ncara membuat stackOverflow yang baru adalah dengan cara recursion \nrecursion adalah \nfunction foo(){\n foo();\n}\nfoo() \nfunction yang memanggil dirinya sendiri\n\nsynchronous\n\n\nakibat baik nya kita bisa mengidentifikasi di setiap step yang terjadi \ncontoh \nconsole.log('1'); run first \nconsole.log('2'); run second\nconsole.log('3'); run third\nakibat buruknya , apabila ada satu stack proses dimana melakukan heavy lifting proses \nseperti memproses image , video .. yang terjadi adalah proses berikutnya akan menunggu sampai proses sebelumnya selesai \ncontoh : \nconsole.log('1'); run first \nprosesImage(img); run second\nconsole.log('3'); menunggu proses kedua selesai baru jalan\nconsole.log('3') akan menunggu lama sampai prosesImage selesai ..\n\nasynchronous\n\n\nmembuat suatu proses tidak menunggu heavy lifting proses selesai untuk melanjutkan seluruh proses yang ada \nconsole.log('1'); run first \nprosesImage(img); run second\nconsole.log('3'); tidak perlu menunggu proses kedua selesai untuk di eksekusi \ncontoh asynchronous :\nconsole.log('1'); run first \nsetTimeout(()=>{ akan di eksekusi setelah 2 seconds \nconsole.log('2');\n},2000)\nconsole.log('3');\nhasillnya => 1,3,2 \n\nJavascript Run-Time Environment\n\n\n_______ \n| V8 | ===> [WEB Api] ===> [Callback Queue] \n|_____| [Event Loop]\n[call stack] <====== callback()\n\njavacsript run time environment adalah pembagian proses kerja dalam memproses javascript \nJavascipt > v8 engine // allocate memory dan memproses javascript read and write\nbrowser > Web APIs\n - DOM (document)\n - AJAX (XMLHttpRequest)\n - Timeout (setTimeOut) //artinya setTimeOut bukan termasuk dari javasrcipt melainkan webAPIs\n > Callback Queue \n - onclick (event callback)\n - onload \n - dll \n > Event Loop\ncontoh : \nconsole.log('1'); run first \nsetTimeout(()=>{ akan di eksekusi setelah 2 seconds \nconsole.log(2);\n}.2000)\nconsole.log('3');\n [call stack]\n|\n|\n|\n|console.log('1') // ditaruh ke stack dan di execute \n [call stack]\n|\n|\n|\n|setTimeOut(()=>{console.log('2')},2000)) // ditaruh ke stack , akan tetapi karna setTimeOut bagian dari WebApi ,, maka proses ini di over ke Web API dan dihapus di stack \n\n (webAPI)\n|setTimeOut(()=>{console.log('2')},2000)) // ini akan di iterate selama 2seconds\n\n [call stack]\n|\n|\n|\n|console.log(3); // di eksekusi \n\nsetelah 2 second berada di web api \n\n [event Loop]\nberfungsi untuk looping ke dalam stack dan callback queue mencek apakah ada stack yang kosong \ndan apakah ada callback queue yang harus dilakukan \n\n [callback queue]\n|console.log('2'); // ditaruh ke dalam callback queue\n\n [call stack]\n|\n|\n|\n|console.log('2');//ditaruh ke stack dan di execute\n\n//contoh dunia nyata \nsynchronous adalah kita menelepon seseorang untuk menanyakan sesuatu dan kita menunggu yang telpon untuk menjawab \nasynchronous adalah kita mensms seseorang untuk menanyakan sesuatu kemudian kita melakukan suatu hal yang lain sambil menunggu penerima menjawab apabila dia punya waktu \n\nsama halnya yang terjadi pada callback function yaitu kita membuat sebuah pesan agar function itu di ekseskusi setelah semua function di laksanakan \nfunction logging(){\n console.log(result);\n}\nfunction go(fn,x){\n x=x+5;\n kurang(fn,x)\n}\nfunction kurang(fn,y){\n result = y-2;\n fn(); \n}\ngo(logging, 10); // logging akan diekseksui setelah semua function di go dan kurang terjadi \n\ncontoh asynchronous 2 : \nsama halnya yang tejadi pada \nelement.addEventListener('click',function(){\n console.log('clicked');\n});\nevent click akan ditaruh ke dalam callback queue \n [callback queue]\n|click > function(){console.log('clicked')}\n\ndan event loop akan mendetek apakah ada click yang terjadi \napabila terjadi \nmaka event loop akan mencek di callback queue apakah ada callback yang dimilki click event \napabila ada maka callback di callback queue akan ditaruh ke stack \n\njelasnya > [callback queue]: click {callback fn()} > [event loop] : click terjadi > cek [callback queue]untuk click > [call stack] callback dari callback queue di taruh ke stack",
"description": "how javascript work",
"scope": ""
},
"vue nedb": {
"prefix": "QQ:nedb-create-database",
"body": "var Datastore = require(\"nedb\"),\n db = new Datastore({\n filename: \"test.db\",\n autoload: true\n });",
"description": "vue nedb",
"scope": ""
},
"javascript value pointer": {
"prefix": "QQ:vue-note-event/value-pointer/bind-attribute/append-html-string",
"body": "\n//==================\n// EVENT \n//==================\n
{{kalimat}}
//Kalimat disini berasa dari data yang berada di elemenet app\n//setiap anak dari element dapat mengakses data dan methods parent element\n{{getKalimat()}}
//method dapat diakses dan di ekseskusi melalui vue element \n//==================\n// BIND ATTRIBUTE \n//==================\n
// v-bind digunakan untuk mengubah isi dari attribute element dengan data yang terdapat pada vue object\n
//element tidak akan mencari style\n
//element tidak akan mencari css\n// v-bind shorthand adalah dengan cara menghilangkan v-bind dan tulis :href=\"\" sama dengan v-bind:href=\"\"\n//==================\n// APPEND HTML STRING \n//==================\n
// v-html digunakan untuk menulis string html element dan di append ke element yang memanggil attribute v-html \n",
"description": "event value pointer bind attribute append html string",
"scope": ""
},
"javascript render once": {
"prefix": "QQ:vue-note-render-once/next-tick()/force-update",
"body": "\n//==================\n// RENDER ONCE\n//==================\n{{kalimat}}
//tidak akan di re render kalau terjadi perbuhan data\n
//2 adalah custom argument dan $$event adalah event dari click\nuntuk mengambil $$event di method increse \nmethods:{\nincrese(data,event){\ndata==2 \nevent==$$event\n}\n}\n//==================\n// NEXT TICK()\n//==================\nevent listener nextTick();\ndigunakan untuk menjalankan function setelah DOM cycle mengalami update \ncontoh :\nmounted() {\nthis.$$nextTick(()=>{\nwindow.addEventListener('resize',()=>{\n this.windowHeight=window.innerHeight;\n});\n})\n},\n//==================\n// FORCE UDPATE\n//==================\nthis.$$forceUpdate() digunakan untuk me render kembali dom\ncara lain adalah membedakan component atau element dengan mengidentifkasikannya dengan attribute key \ncontoh pada img , img dari user 1 pindah ke 2 tidak akan update apabila keynya sama \n{{nilai}}
\nnew Vue({\n el:\"#soemthjing\",\n data:{\n nilai:''\n }\n})\nnote***\n{{ counter * 2 > 10 ? 'Greater than':'smaller than 10' }}
//kita bisa mengekseksekusi javascript disini \n",
"description": "event modifier",
"scope": ""
},
"javascript event two ways data binding": {
"prefix": "QQ:vue-note-two-ways-data-binding/computed-property",
"body": "\n//==================\n// TWO WAYS DATA BINDING\n//==================\n{{ myName }}
\nnew Vue({\n el:\"#seomtjing\",\n data:{\n myName:\"taufik\"\n }\n})\n//==================\n// COMPUTED PROPERTY\n//==================\ncomputed property dapat digunakan sama halnya dengan data property artinya tidak perlu eksekusianl function \n{{output}}
// tidak akan dijalankan kalau tidak bersangkutan dengan data yang membutuhkan computed \n vs\n{{result()}}
// akan dieksekusi tiap ada perubahan render data \nnew vue({\n el:\"something\",\n data:{\n nilai:0\n }\n computed:{\n output:function(){\n this.nilai++;\n console.log('computed'); -----| akan dieksekusi apabila output berhubungan dengan nilai \n },\n fullName: {\n get: function() { //get untuk mendapatkan nilai awal\n \n },\n set: function(newValue) { //untuk mengubah nilai dari full name\n \n }\n } |\n }, |\n methods:{ |\n result:function(){ -----------| akan selalu di re eksekusi walaupun tidak berhubungan apabila di ekseskusi di template\n console.log('methods');\n }\n }\n})\n//Advance Computed property filtering data di array \n\n \n \n\nGET AND SET Computed\n",
"description": "two ways data binding",
"scope": ""
},
"javascript watch dan template": {
"prefix": "QQ:vue-note-watch-propert/template-property",
"body": "\n//==================\n// WATCH PROPERTY\n//==================\nwatch digunakan untuk memantau perubahan data pada property value lain di object vue instance , \nproperty pada watch harus sama dengan property yang di pantau \nnew Vue({\n el:\"#seomthing\",\n data:{\n nilai1:0\n },\n computed:{\n result:function(){\n return this.nilai==5 ? \"ini 5\":\"belum 5\";\n }\n },\n watch:{\n nilai1:function(){\n //ini akan memantau value dari nilai1 , jika nilai1 berubah maka kode disini akan dieskekusi\n },\n result:function(){\n //akan memantau perubahan di result \n }\n }\n})\n//==================\n// TEMPLATE PROPERTY\n//==================\ntemplate property digunakan untuk membuat html property melalui javascript vue object \n",
"description": "template dan watch property",
"scope": ""
},
"javascript dynamic style dan css": {
"prefix": "QQ:vue-note-DYNAMIC-STYLE-CSS",
"body": "\n\n //menggunakan {} karena untuk mendefnie css collection di javascript diperlukan itu \n //red adalah nama css property yang akan di apply apabila attached bernilai true\n
\n //divClass akan mereference ke computed property \n
\n //menggunakan list condisi di bind property , blue disini me reference ke color property di data , \n // red akan di tambahkan apabila attached = true \n
\n //mereference style sebagai data tunggal \n
\n
\n
\n\n\n \n//CARA IMPORT 2 DI LOCAL \n//app.js \nimport myName from './home.vue';\n",
"description": "vue tag local component",
"scope": ""
},
"javascript data-parent>child": {
"prefix": "QQ:vue-note-data-parent>child",
"body": "\n//==================\n// PASSING DATA PARENT => CHILD // PROPS PROPERTY\n//==================\n//parent.vue\n\n \n //dengan membuat custom attribute dan dibinding maka akan mempassing props yang berisi data dari parent element ke child element \n
\n \n\n//child.vue\n\n \n my first Name : {{firstName}}\n my Last Name : {{lastName}}\n
\n \n",
"description": "data parent ke child",
"scope": ""
},
"javascript data-child>parent": {
"prefix": "QQ:vue-note-data-child>parent",
"body": "\n//==================\n// PASSING DATA CHILD => PARENT // $$EMIT\n//==================\n//parent.vue\n\n \n
//akan passing data ke child \n //cara 1\n
//akan mendengarkan custom event yang di sent oleh child , $$event = data yang diangkut\n //cara 2\n
//passing fungsi ke child dan eksekusi di child\n
\n\n//child.vue\n\n \n
{{myName}}
\n //cara 1\n
\n //cara 2\n
\n
\n",
"description": "data child ke parent",
"scope": ""
},
"javascript slot component": {
"prefix": "QQ:vue-note-slot-component",
"body": "\nSlot adalah metode untuk passing components dari luar \n\n \n \n THE BEAUTIFULL WORLD //passing ini ke dalam custom componen\n HEAVY DUTY //kita bisa membuat multiple slot dengan memberikan nama di slot \n \n
\n \n//child.vue\n\n \n //style dari h2 component yang di passing bisa diubah di child.vue\n
\n ",
"description": "slot components",
"scope": ""
},
"vue component element": {
"prefix": "QQ:vue-note-component-element",
"body": "\n//NOTE default behavior COMPONENT akan destroy di tiap kali berganti componen\n//component1.vue\n\n \n COMPONENT1\n
\n \n//component2.vue \n\n \n COMPONENT2\n
\n \n//app.vue \n\n \n component1 \n component2 \n
\n \nimport component1 './component1.vue';\nimport component2 './component2.vue';\nexport default(){\n data(){\n return{\n selectedComponen:'component1'//data di selectedComponen menjadi selector componen yang tersedia\n }\n },\n components:{\n component1,\n component2\n }\n}\n//Cara mengganti destroy component behavior dengan cara me wrap component elemnt dengan keep-alive componen \n\n \n //componen yang berada didalam keep alive tidak akan di destroy\n \n
\n \n//cara mengakses proses perpindahan component \n",
"description": "component element"
},
"vue custom directive ": {
"prefix": "QQ:vue-note-custom-directive",
"body": "\n//==============================\n// CUSTOM DIRECTIVES GLOBAL\n//==============================\ndirectives life cycle = \n> bind(el,binding,vnode) once directives is attached \n> inserted(el,binding,vnode) inserted in Parent node \n> update(el,binding,vnode,oldVnode) Once component is Updated(without children)\n> componentUpdate(el,binding,vnode,oldVnode) Once component is updated(with children)\n> unbind(el,binding,vnode) once directive removed\nVue.directive('hightlight',{ //membuat directives di global \n bind(el,binding,vnode){\n el.style.backgroundColor = \"green\";\n el.style.backgroundColor = binding.value;//binding value adalah value dari di notasion v-highlight=\"'red'\" << akan menset secara dinamik bg-warna merah \n if(binding.arg == 'background'){ //arg adalah argument tambahan dari directives > v-highlight:background ,:background disana adalah .arg \n el.style.color = binding.value;\n }\n let delay = 0;\n if(binding.modifiers('delayed')){//modifiers sama halnya dengan @click.stop < stop disini adalah modifier \n delay=3000;\n }\n setTimeout(()=>{\n el.style.color = binding.value;\n },delay);\n //sehingga bisa diakses dengan cara v-highlight.delayed=\"'red'\";\n //MULTIPLE MODIFIER tinggal tambah binding.modifier('nama modifier')\n //COMPLEX BINDING VALUE\n //v-highlight:background = \"{mainColor:'red',secondColor:'blue'}\";\n let mainColor = binding.value.mainColor;\n let secondColor = binding.value.secondColor;\n //FUNCTION BINDING VALUE \n //v-myOn:click = \"dipicik\"; \n if(binding.modifier('click')){\n el.addEventListener(binding.arg,function(){\n binding.value(); // akan mengeksekusi methods yang ada di vue instance\n });\n }\n \n }\n});",
"description": "custom directive"
},
"vue filter property": {
"prefix": "QQ:vue-note-filter-property",
"body": "\n//==============================\n// VUE FILTER PROPERTY\n//==============================\n//akan memfilter data yang akan di tampilkan ke user \n\n \n {{ text | toUppercase }} // \"|\" adalah pipe dan toUppercase adalah filters yang akan memfilters text sebagai value di argument\n // kita bisa mengisi multiple filter tinggal tambahakn pipe , {{ text | toUppercase | toLowercase }}\n
\n \nexport default{\n data(){\n return{\n text:\"Hello World!\"\n }\n },\n filters:{\n toUppercase(value){\n return value.toUpperCase();\n }\n }\n}\n//cara menggunakan filters ",
"description": "vue filter property"
},
"vue transition element": {
"prefix": "QQ:vue-note-transition-element",
"body": "\n//==============================\n// VUE TRANSITION\n//==============================\ntransition menggunakan element yang diberikan vue yaitu \n //element didalam tag transition akan di animated \n \n//namafungsi(el)\n \nlist atribute untuk transition \nname=\"\"//digunakan untuk mengidentifi class di css yang mana dipakai misal .fade-enter-active maka name='fade' \nenter-active-class=\"\"//digunakan untuk menspisify class yang digunakan saat element masuk , note kita bisa memakai 'wow fadeIn' disini atau class diluar \nleave-active-class=\"\"//digunakan untuk menspisify class yang digunakan saat element keluar, note kita bisa memakai 'wow fadeOut' disini atau class diluar \ntype=\"animation/transition\"//digunakan untuk men set duration yang mana dipakai apabila menggunakan animation dan transition di css \nmode=\"out-in/in-out\" // digunakan untuk mengoverride element yang dianimasi di posisi yang sama\nappear // digunakan untuk saat web dirender maka animation berjalan\n\n \n \n//==============================\n// VUE TRANSITION GROUP \n//==============================\n\nbedanya dengan transition pada tiap element yang berada dalam transition group harus memiliki key\ndan transition group membuat html baru bukan re render yang sudah ada , kita bisa mengoverride behaviornya \ndengan cara menambahkan \n \n
\n \n\n//MENGGUNAKAN QUERY PARAMETER \n//=============================\ngo to detail \n//cara mengambil data dari query parameter \n$$route.query.(property) >> $$route.query.id , $$route.query.name\n\n//MULTIPLE ROUTER VIEW \n//=============================\n//routes.js \nexport const routes = [\n {path:'/header', default:Header,'header':Header}\n]\n\n \n
//maka saat berpindah dengan #user1 akan di scroll ke posisi id user1 \n
\n//==============================\n// PROTECTING ROUTE\n//==============================\nbeforeEnter ke path \n//main.js < global cek\nrouter.beforeEach((to,from,next)=>{\n next();//next(false)/next('/path')\n});\n//routes.js < per route cek \n[\n {path:'/path',component:(component), beforeEnter(to,from.next)=>{}}\n]\n//component < local per component \nexport default{\n beforeRouteEnter (to, from, next) {\n if(userLoggin){\n //next();\n next(vm=>{\n vm.nama;//untuk mengakses data sebelum component di route nya \n });\n }else{\n next(false);\n }\n }\n}",
"description": "vue router note"
},
"vue vuex note": {
"prefix": "QQ:vue-note-vuex",
"body": "\n//==============================\n// VUEX STATE MANAGMENT\n//==============================\nnpm install --save vuex\n//store.js\nimport Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\nexport const store = new Vuex.store({\n state:{\n counter:0\n }\n});\n//main.js\nimport { store } from './store.js';\nnew Vue({\n store\n})\n//cara mengakses data di vuex store state \nmisal kita memiliki state counter \nstate:{\n counter:0\n}\n//component.js \n\n \n {{counter}}\n
\n \n\nKASUS V-MODEL \ncara 1\n\n \n {{$$store.getter.doubleCounter}} == {{doubleCounter}}\n
\n \n\nMUTATION \n//======================\nadalah methods property yang ada di vuex store akan tetapi berjalan pada synchronous \nexport const store = new Vuex.store({\n state:{\n counter:0\n },\n getters:{\n doubleCounter(state){\n return state.counter * 2 ;\n }\n },\n mutations:{\n increment(state, n){ //n adalah payload custom parameter\n state.counter++;\n },\n decrement(state){\n state.counter--;\n }\n }\n});\nuntuk menggunakan data dari mutations\n//component.vue \n\n \n
\n \n\nACTION \n//======================\nadalah async property yang ada di vuex store yang berjalan untuk memproses mutations agar bekerja di async\nexport const store = new Vuex.store({\n state:{\n counter:0\n },\n getters:{\n doubleCounter(state){\n return state.counter * 2 ;\n }\n },\n mutations:{\n increment(state){\n state.counter++;\n },\n decrement(state){\n state.counter--;\n }\n },\n actions:{//gunakan action hanya pada async task\n asyncIncrement({commit}, payload){ // payload adalah custom parameter untuk mem pass value, untuk lebih dari 1 argument gunakan object {counter:10, duration:500}\n setTimeOut(()=>{\n commit('increment');//akan menjalankan increment mutation setelah 1000ms\n },1000)\n }\n }\n});\nuntuk menggunakan data dari actions\n//component.vue \n\n \n
\n \n\nMODULES SEPARATION OF CONCERN\n//======================\nadalah async property yang ada di vuex store yang berjalan untuk memproses mutations agar bekerja di async\nimport user from './modules/user.js'\nexport const store = new Vuex.store({\n state:{\n counter:0\n },\n getters:{\n doubleCounter(state){\n return state.counter * 2 ;\n }\n },\n mutations:{\n increment(state){\n state.counter++;\n },\n decrement(state){\n state.counter--;\n }\n },\n actions:{//gunakan action hanya pada async task\n asyncIncrement({commit}, payload){ // payload adalah custom parameter untuk mem pass value, untuk lebih dari 1 argument gunakan object {counter:10, duration:500}\n setTimeOut(()=>{\n commit('increment');//akan menjalankan increment mutation setelah 1000ms\n },1000)\n }\n },\n modules:{\n user\n }\n});\n//user.js\nconst setter = {\n name:'taufik'\n}\nconst getter = {\n name(state){\n state.name = state.name.toUpperCase();\n }\n}\nconst mutations = {\n updateName(state, payload){\n state.name = payload;\n }\n}\nconst actions = {\n updateName({commit},payload){\n commit('updateName',payload);\n }\n}\nexport default{\n state,\n getters,\n mutations,\n actions\n}",
"description": "vue vuex note"
},
"nuxt route validation": {
"prefix": "QQ:nuxt-note-route-validation",
"body": "\n//========================\n// ROUTE VALIDATION\n//========================\n",
"description": "nuxt route validation"
},
"nuxt assets external source": {
"prefix": "QQ:nuxt-note-assets-external-source",
"body": "\n//====================\n// Assets folder EXTERNAL RESOURCE\n//====================\ndigunakan untuk membuat static file seperti .css, .js, .icon , dll \nuntuk menggunakannya secara global kita bisa menambahkan static path dari file yang kita buat dan taruh di \nnuxt.config.js , entah pada bagian css ['~/assets/css/main.css'] maka setiap layout akan mendapatkan css style ini \ncss:[~/assets/css/main.css'],\nscript: [\n {\n src: \"libs/modernizr.min.js\"\n },\n ]\nkita juga bisa menaruhnya di build in vendor\nbuild: {\n vendor: ['~/assets/js/mylib.js'],\n }",
"description": "nuxt assets"
},
"nuxt asyncdata dan fetch": {
"prefix": "QQ:nuxt-note-asyncdata-fetch",
"body": "\n//======================\n// asyncData method\n//======================\nNUXT set data di server side dan menunggu data ada baru page di load\nnuxt hanya akan memanggil methods ini di pages , kalau di di gunakan di components tidak berfungsi \n\ncontoh\n\nasync data akan memproses data di server saat pertama kali page di load, dan setelahnya setiap async data di process di client\ncontext parameter dapat mengakses sama halnya dengan $$route \ncontoh \nasyncData(context,callback){\n callback(null,{\n data1:context.params.id //mengakses params di route \n data2:context.query.name // mengakses query di route \n data3:context.store.state.hobyy // mengakses store vuex \n })\n}\nNOTE asyncData hanya bisa bekerja pada pages dan tidak pada per component file\ncontoh2 dengan promise\nasyncData(con){\n return new Promise((resolve,reject)=>{\n setTimeout(()=>{\n // disini kita bisa return data \n resolve();\n },1000)\n })\n}\ncontoh3 dengan async asyncData \nasync asyncData(con){\n let {data} = await axios.get('dataurl');\n return {data.data}\n}\n//=====================\n// fetch methods \n//=====================\nfetch di vue nuxt property adalah reserver methods yang bekerja sama seperti asyncData, \nakan berjalan di server side pertama kali diload , dan kemudian di client \n\nbeda nya antara asyncData , fetch tidak mem populate data di components \ncontoh2 dengan promise\nfetch(con){\n return new Promise((resolve,reject)=>{\n setTimeout(()=>{\n // disini kita bisa return data \n resolve();\n },1000)\n })\n}",
"description": "nuxt async data fetch"
},
"nuxt server middleware": {
"prefix": "QQ:nuxt-note-serverMiddleware",
"body": "\n//======================\n// SERVER MIDDLEWARE\n//======================\nServer middleware berbeda dengan middleware, serverMiddleware dapat menjalankan perintah seperti express dan membuat endpoint baru \ncara memakainya \n//nuxt.conf.js tambahkan property serverMiddleware \nserverMiddleware:['~/(namafolder)/(nama js file)'],\ncontoh : serverMiddleware: ['~/api/index.js'],\n//index.js \nvar express = require('express')\nvar app = express();\napp.get('/',function(req,res){ // apabila kita mengetikkan localhost:3000/api , maka akan memunculkan hello world dan diluar dari vue js \n res.send('hello world')\n});\napp.get('/taufik',function(req,res){ // kita bisa mengambil variable message dengan cara fetch('localhost:3000/api/taufik').then(res=>{return res.json()}).then(data=>{console.log(data)})\n res.json({message:\"Hello\"})\n});\nmodule.exports = {\n path: \"/\",\n handler:app\n}",
"description": "nuxt serverMiddleware"
},
"nuxt fix": {
"prefix": "QQ:nuxt-note-fix-watchQuery-loading",
"body": "// Watch for $$route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)\n watchQuery: ['page'],\n // Key for (transitions)\n key: to => to.fullPath,\n // Called to know which transition to apply\n transition(to, from) {\n if (!from) return 'slide-left'\n return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'\n },\n data() {\n return {\n loading: false,\n blog: {},\n }\n },\n created() {\n this.$$nextTick(function() {\n this.loading = true\n })\n },\n async asyncData({ store, query, env, route }) {\n if (store.state.blog.data.length < 1) {\n let { data } = await axios.get(env.HOST_URL + '/api/data/blog')\n store.commit('blog/addBlog', data.data)\n store.commit(\n 'blog/addOneBlog',\n data.data.filter(e => e._id == route.query.xx)[0]\n )\n store.commit(\n 'blog/addKeyword',\n data.data.filter(e => e._id == route.query.xx)[0].keywords.split(',')\n )\n } else {\n store.commit(\n 'blog/addOneBlog',\n store.state.blog.data.filter(e => e._id == route.query.xx)[0]\n )\n store.commit(\n 'blog/addKeyword',\n store.state.blog.data\n .filter(e => e._id == route.query.xx)[0]\n .keywords.split(',')\n )\n }\n return {\n something: 'test'\n }\n },\n",
"description": "nuxt fix"
},
"mongodb mongoose crud": {
"prefix": "QQ:mongodb-note-crud",
"body": "person.create({name:\"taufik\"},function(err,data){ console.log(data) });\nperson.find({name:\"taufik\"},function(err,data){ console.log(data) });\nperson.update({name:\"taufik\"},{name:\"akbar\"},function(err,data){ console.log(data) });\nperson.remove({name:\"taufik\"},function(err,data){ console.log(data) });\n\n// $push\nperson.findByIdAndUpdate(\n req.params.id,\n {\n $push: {\n comments: req.body\n },\n },\n function(err, data) {})\n\n// $set\nBarang.findByIdAndUpdate(\n req.params.id,\n {\n $set: {\n terjual: data.terjual + jumlah,\n stok: data.stok - jumlah\n }\n })\n\n//filter yng ditampilkan 1 = display, 0 = hide\nBlog.find(\n {},\n {\n _id: 1,\n title: 1,\n kategori: 1,\n public: 0,\n createdBy: 1\n },\n function(err, data) {})\n\n// $lookup\nNotifikasi.aggregate(\n [\n {\n $lookup: {\n from: 'users',\n localField: 'dari',\n foreignField: '_id',\n as: 'darinya'\n }\n },\n {\n $lookup: {\n from: 'users',\n localField: 'ke',\n foreignField: '_id',\n as: 'kenya'\n }\n }\n ],\n function(err, data) {})\n\n// $match\n Transaksi.aggregate(\n [\n {\n $match: {\n _id: req.params.id\n }\n },\n {\n $lookup: {\n from: 'users',\n localField: 'idPembeli',\n foreignField: '_id',\n as: 'pembeli'\n }\n },\n {\n $lookup: {\n from: 'users',\n localField: 'idPenjual',\n foreignField: '_id',\n as: 'penjual'\n }\n },\n {\n $lookup: {\n from: 'barangs',\n localField: 'barangId',\n foreignField: '_id',\n as: 'barang'\n }\n }\n ],\n function(err, data) {})",
"description": "mongoose crud"
},
" MODAL-detect-mobie": {
"prefix": "QQ:js-detect-mobile|desktop",
"body": "$(document).ready(function(){\n var md = new MobileDetect(window.navigator.userAgent);\n let hasil = md.mobile();\n if(hasil== null)\n {\n console.dir('not mobile');\n }\n else\n {\n $('#forceRotation').modal({\n backdrop: 'static',\n keyboard: false,\n show : true // or false\n });\n $(function() {\n // Bind an event handler to window throttledresize event that, when triggered,\n // passes a reference of itself that is accessible by the callback function.\n $( window ).on( \"throttledresize\", throttledresizeHandler );\n function throttledresizeHandler( event ) {\n console.dir(event);\n $('#forceRotation').modal('hide');\n }\n // You can also manually force this event to fire.\n });\n }\n});",
"description": "model detect",
"scope": ""
},
" Javascript observer": {
"prefix": "QQ:js-observer(method)",
"body": "",
"description": "div changed",
"scope": ""
},
// CSS SECTION
"css media queries": {
"prefix": "QQ:css-media-queries",
"body": "/* // Small devices (landscape phones, 576px and up) */\n@media (min-width: 576px) { \n \n }\n\n/* // Medium devices (tablets, 768px and up) */\n@media (min-width: 768px) { \n \n }\n\n/* // Large devices (desktops, 992px and up) */\n@media (min-width: 992px) { \n \n }\n\n/* // Extra large devices (large desktops, 1200px and up) */\n@media (min-width: 1200px) { \n \n }",
"description": "CSS MEDIA QUERIES"
},
"css flexbox": {
"prefix": "QQ:css-flexbox",
"body": ".flex-container {\n display: flex;\n flex-wrap: nowrap;\n}\n.flex-container > div {\n padding:10px;\n}\n",
"description": "CSS Flexbox"
},
"2 div container": {
"prefix": "QQ:html-container-2-div-kiri-kanan",
"body": "\n
\n
",
"description": "html container"
},
"div navigation admin": {
"prefix": "QQ:html-navigation-admin-!",
"body": "\n\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n \n Menu 1\n \n \n \n \n
\n sub menu\n
\n
\n\n
\n
\n \n Menu 2\n \n \n \n \n
\n sub menu\n
\n
\n\n
\n
\n
\n
\n \n
\n
\n @yield('content')\n
\n \n\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n \n Menu 1\n \n \n \n \n
\n sub menu\n
\n
\n\n
\n
\n \n Menu 2\n \n \n \n \n
\n sub menu\n
\n
\n\n
\n
\n
\n
\n \n
\n
\n
\n \n\n
\n\n\n",
"description": "html navigation admin full"
},
"css flexbox center": {
"prefix": "QQ:css-flexbox-center",
"body": ".flex-center {\n display: flex;\n flex-wrap: nowrap;\n justify-content: center;\n}",
"description": "CSS Flexbox center"
},
"css print a4": {
"prefix": "QQ:css-printA4",
"body": "@page {\n size: auto; /* auto is the initial value */\n\n /* this affects the margin in the printer settings */\n margin: 2cm 2cm 3cm 3cm;\n}\n\nbody {\n /* this affects the margin on the content before sending to printer */\n margin: 0px;\n}",
"description": "CSS print a4"
},
"css no print": {
"prefix": "QQ:css-no-print",
"body": "@media print {\n .no-print,\n .no-print * {\n display: none !important;\n }\n .print * {\n display:initial !important;\n }\n}",
"description": "CSS no print"
},
"css background": {
"prefix": "QQ:css-background",
"body": "background: ${1:scroll|fixed|local} ${2:color|transparent|linear-gradient(to right, red , blue)|radial-gradient} ${3:url('')|none} ${4:left center|left bottom|right top|right center|right bottom|center top|center center|center bottom} ${5:repeat|repeat-x|repeat-y|no-repeat|space|round};\n${6: scroll The background image will scroll with the page. This is default\n fixed The background image will not scroll with the page\n local The background image will scroll with the element's contents\n color Specifies the background color. Look at CSS Color Values for a complete list of possible color values. \n transparent Specifies that the background color should be transparent. This is default \n url('URL') The URL to the image. To specify more than one image, separate the URLs with a comma\n none No background image will be displayed. This is default \n repeat The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default \n repeat-x The background image is repeated only horizontally \n repeat-y The background image is repeated only vertically \n no-repeat The background-image is not repeated. The image will only be shown once \n space The background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images \n round The background-image is repeated and squished or stretched to fill the space (no gaps) }\nbackground-size: ${7:contain|cover|100px 200px};\nbackground-origin: ${8:border-box|padding-box|content-box};",
"description": "CSS"
},
"css border": {
"prefix": "QQ:css-border",
"body": "border: ${1:1px|10%} ${2:dotted|dashed|solid|double|groove|ridge|inset|outset|none|hidden} ${3:color|rgba(10,10,10,0.5)};\n${4:dotted - Defines a dotted border\ndashed - Defines a dashed border\nsolid - Defines a solid border\ndouble - Defines a double border\ngroove - Defines a 3D grooved border. The effect depends on the border-color value\nridge - Defines a 3D ridged border. The effect depends on the border-color value\ninset - Defines a 3D inset border. The effect depends on the border-color value\noutset - Defines a 3D outset border. The effect depends on the border-color value\nnone - Defines no border\nhidden - Defines a hidden border}\nborder-image: ${5:url('')} {6:30% stretch|round}; \nborder${7:-radius|-top-left-radius|-top-right-radius|-bottom-left-radius|-bottom-right-radius}: ${8:10%};\n${9:border-collapse: collapse|digunakan di table}",
"description": "CSS border"
},
"css margin": {
"prefix": "QQ:css-margin",
"body": "margin-${1:left|top|bottom|right}: $2;\n${3:/* up down = 0 left, right = auto .. akan mempoisiskan tengah element */\n/* margin: 0 auto ; */\n/* untuk menghilangkan space between parent margin dan elment margin */\n/* margin: 0 ; */}",
"description": "CSS margin"
},
"css padding": {
"prefix": "QQ:css-padding",
"body": "padding-${1:left|top|bottom|right}: $2;",
"description": "CSS padding"
},
"css height width": {
"prefix": "QQ:css-height|width",
"body": "height: $1;\nwidth:$2;\nmax-heigth: $3;\nmax-width: $4;",
"description": "CSS height width"
},
"css box-model": {
"prefix": "QQ:css-box-model(border>complete)",
"body": "width: ${1:100px};\nheight: ${2:100px};\nbox-shadow: ${3:h-offset v-offset blur spread color color|none};\nbox-sizing: ${4:content-box|border-box};\nborder: ${5:1px|10% dotted|dashed|solid|double|groove|ridge|inset|outset|none|hidden black|rgba(10,10,10,0.5)};\nborder${6:-radius|-top-left-radius|-top-right-radius|-bottom-left-radius|-bottom-right-radius}: ${7:10%};\noutline: ${8:none|dashed|solid|double|groove|ridge|inset|outset|dotted|hidden color thin|medium|thick};\nbackground: ${9:scroll|fixed|local color|transparent|linear-gradient(to right, red , blue) url('')|none left center|left bottom|right top|right center|right bottom|center top|center center|center bottom repeat|repeat-x|repeat-y|no-repeat|space|round};",
"description": "CSS box-model"
},
"css box-shadow": {
"prefix": "QQ:css-box-shadow",
"body": "box-shadow: ${1:h-offset v-offset blur spread color color|none};\nbox-sizing: ${2:content-box|border-box};",
"description": "CSS box-model"
},
"css cursor": {
"prefix": "QQ:css-cursor",
"body": "cursor:${1:alias|all-scroll|auto|cell|context-menu|col-resize|copy|crosshair|default|e-resize|ew-resize|grab|grabbing|help|move|n-resize|ne-resize|nesw-resize|ns-resize|nw-resize|nwse-resize|no-drop|none|not-allowed|pointer|progress|row-resize|s-resize|se-resize|sw-resize|text|URL|vertical-text|w-resize|wait|zoom-in|zoom-out|initial|inherit};",
"description": "CSS cursor"
},
"css display": {
"prefix": "QQ:css-display",
"body": "diplay:${1:none|block|inline-block|};",
"description": "CSS cursor"
},
"css font and text model": {
"prefix": "QQ:css-font-text-model",
"body": "font-family: ${1:'Times New Roman', Times, serif};\nfont-size: ${2:10}px;\nfont-style: ${3:normal|italic|oblique};\nfont-weight: ${4:normal bold bolder lighter};\ntext-align: ${5:left|center|right|justifiy};\ntext-decoration: ${6:none|overline|line-through|underline};\ntext-transform: ${7:uppercase|lowercase|capitalize};\ntext-indent: ${8:30px}; /* memposisikan paragpah awal lebih kekanan */\ntext-shadow: ${9:h-shadow v-shadow blur-radius color|none};\ntext-overflow: ${10:ellipsis}; /* apabila ada huruf keluar dari border maka huruf berikutnya diganti menjadi ... */\nletter-spacing: ${11:-3px|3px};\nline-heigth: ${12:0.5|1.0|1.5};\nword-spacing: ${13:-3px|3px};\nwriting-mode: ${14:vertical-lr|rl} ;\ndirection: ${15:rtl|ltr};\nclear : ${16:none|left|right|both};/* menghillangkan float element dikanan dan dikiri di selected element */\nword-wrap:break-word;/* agar text tidak melewati lebar div/border */\n",
"description": "CSS text-font"
},
"css text column": {
"prefix": "QQ:css-text-column",
"body": "column-count: ${:jumlah column} ${:balance|auto}; /* membuat text dipenggal menjadi bercolumn column */\ncolumn-gap:${:40px};\ncolumn-rule: 4px solid|doubled black;\ncolumn-span: all; /* ambil element yang ingin dipisah dengan column contoh h1 dalam p */",
"description": "CSS text-column"
},
"css icon": {
"prefix": "QQ:css-icon-model",
"body": "content: \"\\f000\";\nfont-family: FontAwesome;\nfont-style: normal;\nfont-weight: normal;\ntext-decoration: inherit;\n/*--adjust as necessary--*/\ncolor: #000;\nfont-size: 18px;\npadding-right: 0.5em;\nposition: absolute;\ntop: 10px;\nleft: 0;",
"description": "CSS text-column"
},
"css list": {
"prefix": "QQ:css-list",
"body": "list-style : ${1:disc|circle|square|upper-roman|lower-alpha|etc...} ${2:outside|inside} ${3:url()|jikamenggunakan image};",
"description": "CSS text-column"
},
"css table": {
"prefix": "QQ:css-table-model",
"body": "vertical-align: ${1:top|bottom};\ntable-layout:${2:fixed|auto|inherit};\nborder-collapse:${3:collapse};\nempty-cell:${4:show|hide};\ntext-align: ${5:left|right|center|justify};\nwriting-mode: ${6:vertical-lr|rl} ;",
"description": "CSS table"
},
"css position": {
"prefix": "QQ:css-position",
"body": "position: ${1:absolute|fixed|static|sticky|relative};\n${2:top|left|right|bottom}: $3;\nz-index: $4;",
"description": "CSS position"
},
"css overflow": {
"prefix": "QQ:css-overflow",
"body": "overflow: ${1:visible|hidden|scroll|auto};\n${2:visible - Default. The overflow is not clipped. It renders outside the elements box\nhidden - The overflow is clipped, and the rest of the content will be invisible\nscroll - The overflow is clipped, but a scrollbar is added to see the rest of the content\nauto - If overflow is clipped, a scrollbar should be added to see the rest of the content}",
"description": "CSS overflow"
},
"css selector": {
"prefix": "QQ:css-selector",
"body": "tag element > \"p\",\"h1\",\"div\"\nclass > \".special\",\".active\",\".animation\"\nid > \"#p1\",\"div1\"\nselect child element dengan cara \"div>p\" atau \"div p\"\nselect neighbor element \"div + table\"\n:not() pilih semua element asalkan bukan element di arugment not() > p:not(#p1)\n:nth-child(1) pilih element anak dari parent ke index argument > div:nth-child(1)\n:nth-child(even)/:nth-child(odd) dapat digunakan untuk memilih element yang ganjil atau genap\n:nth-of-type(1) pilih element ke index 1 dari type yang sama > p:nth-of-type(1)\n:nth-of-type(odd)/:nth-of-type(even)\n:nth-last-child() pilih element anak terakhir dari element\n:nth-last-of-type pilih element index terakhir dari type yang sama\n:checked pilih element yang statusnya checked\n:disabled pilih element yang statusnya disabled\n:hover pilih element yang sedang dihover > p:hover\n:selected pilih element yang statusnya selected\n[attribute=value] [target=_blank] Selects all elements with target=\"_blank\"\n[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word \"flower\"\n[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with \"en\"\n[attribute^=value] a[href^=\"https\"] Selects every element whose href attribute value begins with \"https\"\n[attribute$=value] a[href$=\".pdf\"] Selects every element whose href attribute value ends with \".pdf\"\n[attribute*=value] a[href*=\"w3schools\"] Selects every element whose href attribute value contains the\n:enabled pilih element yang statusnya enabled\n:first-child pilih element anak pertama dari element parent > div:first-child\n:first-of-type pilih element pertama dari type yang sama\n::after pilih element dan taruh content diakhir index element > p.hobby::after{ content:\"<= ini Hobby ku Booii;\"}\n::before pilih element dan taruh content diawal index element > p.hobby::before{ content:\"cek it out =>\"}\n::first-letter edit index dari element pertama atau letter pertama misal contoh membuat huruf besar diawal kalimat p::first-letter{font-size:120px;}\n::first-line edit element pada garis pertama atau letter pertama\n::placeholder edit isi dari placeholder > input#username::placeholder{color:Red;}",
"description": "CSS selector"
},
"css sprite": {
"prefix": "QQ:css-sprite-model",
"body": "/* cara pertama */\nwidth: 46px;\nheight: 44px;\nbackground: url(img_navsprites.gif) 0 0;/* nilai pertama adalah posisi left ,dan kedua adalah top */\n/* cara kedua */\nclip-path: url(path.svg#c1)|circle(30px at 35px 35px)|ellipse(65px 30px at 125px 40px)|polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);\n",
"description": "CSS sprite"
},
"css shadow": {
"prefix": "QQ:css-shadow",
"body": "text-shadow: ${1:h-shadow v-shadow blur-radius color|none};\nbox-shadow: ${2:h-offset v-offset blur spread color color|none};",
"description": "CSS shadow"
},
"css transform": {
"prefix": "QQ:css-transform",
"body": "transform : ${1:translate(50px, 100px)|rotate(20deg)|scale(2, 3)|skewX(20deg)|skewY(20deg)|skew(20deg, 10deg)|matrix(1, -0.3, 0, 1, 0, 0)|rotateX(150deg)|rotateY(130deg)|rotateZ(90deg)};\nbackface-visibility: {2:hidden|visible};\ntransform-style: ${3:flat|preserve-3d};\n${4:perspective: 100px|digunakan pada div parent yang tidak di transform};",
"description": "CSS transform"
},
"css transition": {
"prefix": "QQ:css-transition",
"body": "transition: ${1:property} ${2:duration} ${3:linear|ease|ease-in|ease-out|ease-in-out} ${4:delay};",
"description": "CSS transition"
},
"css aniamtion": {
"prefix": "QQ:css-animation-model",
"body": "div {\n width: 100px;\n height: 100px;\n background-color: red;\n animation-name: animationId;\n animation-duration: 4s;\n animation-timing-function: ease; /* ease|ease-in|ease-out|ease-in-out */\n animation-delay: 2s;\n animation-iteration-count: 3;/* bisa di set infinite */\n animation-direction: reverse; /* normal|reverse|alternate|alternate-reverse */\n animation-fill-mode: forwards; /* forwards|backwards|both|none */\n /* \n normal - The animation is played as normal (forwards). This is default\n reverse - The animation is played in reverse direction (backwards)\n alternate - The animation is played forwards first, then backwards\n alternate-reverse - The animation is played backwards first, then forwards */\n /* gabungan */\n animation: animationId 5s ease 2s infinite alternate;\n}\n\nkeyframes animationId {\n /* cara 1 */\n from {background-color: red;}\n to {background-color: yellow;}\n /* cara 2 */\n 0% {background-color:red; left:0px; top:0px;}\n 25% {background-color:yellow; left:200px; top:0px;}\n 50% {background-color:blue; left:200px; top:200px;}\n 75% {background-color:green; left:0px; top:200px;}\n 100% {background-color:red; left:0px; top:0px;}\n}",
"description": "CSS animation"
},
"css animation": {
"prefix": "QQ:css-animation-short",
"body": "animation: animationId 5s ease 2s infinite alternate; /* ID duration timing-function delay count direction > panggil dengan @keyframes ID*/",
"description": "CSS animation"
},
"css grid-items": {
"prefix": "place-items:",
"body": "place-items: strech strech;",
"description": "place-items: (align-items) | (justify-items) ;start|end|center|space-between|space-around|space-evenly"
},
"css grid": {
"prefix": "grid:1",
"body": "grid: ${1:auto-flow} / ${2:1fr 1fr 1fr} ${3:\"header header header\"} ${4:minmax(100px,auto)} ${5:auto-column} ${6:row|auto-flow};\ngrid-auto-rows: minmax(100px,auto);/*minimal tinggi dan auto lebar*/\nplace-items: ${7:stretch} ${8:stretch};\ngrid-gap:${9:10px} ${10:10px};\ndisplay:grid;",
"description": "grid: row / column area auto-row auto-column \nplace-items : align justify;\ngrid-gap: row column;"
},
"css grid2": {
"prefix": "grid:2-map",
"body": "grid: auto-flow / repeat(${1:3},1fr) ;\ngrid-auto-rows: minmax(100px,auto);\nplace-items: stretch stretch;\ngrid-template-areas: \n\"$2\" \n;\ngrid-gap:10px 10px;\ndisplay:grid;",
"description": "grid: row / column area auto-row auto-column \nplace-items : align justify;\ngrid-gap: row column;"
},
"css grid childern": {
"prefix": "grid:children:",
"body": "grid-column: ${1:1/5};\ngrid-row: ${2:1/2};\n${3:place-self:stretch stretch;}\n",
"description": "short handed"
},
"css grid area": {
"prefix": "grid:children2;",
"body": "grid-area: $1;",
"description": "short handed"
},
"css flex": {
"prefix": "flex:1",
"body": "flex-flow: ${1:row|column|row-reverse|column-reverse} ${2:wrap|nowrap|wrap-reverse};\njustify-content: ${3:flex-start|flex-end|center|baseline|stretch};\nalign-items: ${4:flex-start|flex-end|center|baseline|stretch};\nalign-content: ${5:flex-start|flex-end|center|baseline|stretch};\ndisplay:${6:flex|inline-flex};",
"description": "wrap = inline no wrap = block line , \n"
},
"css flexchilder": {
"prefix": "flex:children",
"body": "flex-grow: ${1:1|2|3|4};\nflex-shrink: ${2:1|2|3|4};\nalign-self: ${3:auto|flex-start|flex-end|center|baseline|stretch}",
"description": "wrap = inline no wrap = block line , \n"
},
"css sm": {
"prefix": "qq:css-sm",
"body": "@media (min-width: 576px) { \n $1 \n }",
"description": "css sm"
},
"css md": {
"prefix": "qq:css-md",
"body": "@media (min-width: 768px) { \n $1\n }",
"description": "css md"
},
"css lg": {
"prefix": "qq:css-lg",
"body": "@media (min-width: 992px) { \n $1\n }",
"description": "css lg"
},
"css xl": {
"prefix": "qq:css-xl",
"body": "@media (min-width: 1200px) { \n $1\n }",
"description": "css xl"
},
// JAVASCRIPT SECTION
"WOW-Setting": {
"prefix": "QQ:js-wow-setting",
"body": "",
"description": "wow setting",
"scope": ""
},
"fetch": {
"prefix": "QQ:js-fetch(XMLHttpRequest)",
"body": "fetch(url,{\n method:\"POST\",//post,get,put,delete\n body:\"JSON=\"+JSON.stringify(json),//body bisa berupa multipart form data atau x-www-form-urlencoded\n credentials:true,//false\n headers{\n 'Authorization': 'Basic '+btoa('username:password'), \n \"content-type\":\"application/x-www-form-urlencoded\"\n },\n mode:'cors'//cross over origin\n //etc CTRL + SPACE\n})\n.then(res=>res.json()) //res.text()|res.json\n.then(data=>{console.dir(data)});",
"description": "ajax",
"scope": ""
},
"mongodb comparation": {
"prefix": "QQ:mongo:comparation-logical",
"body": "$1\n//! Comparation Query \n//! > $$gt (greater than), < $$lt (less than), == $$eq (equal), ! $$ne (not equal) , \n//! >= $$gte (greater than equal), <= $$lte (less than equal) , $$in (mencek list inside of list item /bisa array) \n//! db.inventory.find( { qty: { $$lt: 20 } } )\n//! db.inventory.update(\n//! { tags: { $$in: [\"appliances\", \"school\"] } },//!cek minimal condisi tags harus appliances , atau school lalu ubah sale menjadi true\n//! { $$set: { sale:true } }\n//! )\n\n//! Logical Query\n//! $$and (AND) , $$or (OR), $$not (not), $$nor (not or) \n//! db.inventory.find( { $$and: [ { price: { $$ne: 1.99 } }, { price: { $$exists: true } } ] } )\n",
"description": "comparation",
"scope": ""
},
"mongodb schema model": {
"prefix": "QQ:mongo:schema-model",
"body": "$1\n ids: { type: String, index: { unique: true }},\n name: String,\n binary: Buffer,\n living: Boolean,\n updated: { type: Date, default: Date.now },\n age: { type: Number, min: 18, max: 65 },\n test1: { type: String, match: /ufik/g },\n stuff: { type: String, lowercase: true, trim: true }\n stuff2: { type: String, uppercase: true, trim: true }\n mixed: Schema.Types.Mixed,\n _someId: Schema.Types.ObjectId,\n decimal: Schema.Types.Decimal128,\n array: [],\n nested: {\n test3: { type: Number, default:200},\n },\n map: Map,\n mapOfString: {\n type: Map,\n of: String\n }\n street :{ type: String, validate: hasNumber }\n//===========================\nfunction hasNumber (v) {\n return v.length && //.test(v);\n }\n required: true/false\n default: Any or function, sets a default value for the path. If the value is a function, the return value of the function is used as the default.\n select: boolean, specifies default projections for queries\n validate: function, adds a validator function for this property\n get: function, defines a custom getter for this property using Object.defineProperty().\n set: function, defines a custom setter for this property using Object.defineProperty().\n alias: string, mongoose >= 4.10.0 only. Defines a virtual with the given name that gets/sets this path.\n //=================================STRING\n lowercase: {Boolean}\n Creates a setter which calls .toLowerCase() on the value\n uppercase: {Boolean}\n Creates a setter which calls .toUpperCase() on the value\n trim: {Boolean}\n Creates a setter which calls .trim() on the value\n match: {RegExp}\n Creates a RegExp based validator. The value being set is .test()ed against the RegExp. If it does not pass, validation will fail.\n enum: {Array}\n Creates an enum validator. If the value being set is not in this array, validation will fail.\n //=================================NUMBER\n min: {Number}\n Creates a validator which checks that the value being set is not less than the value specified.\n max: {Number}\n Creates a validator which checks that the value being set is not greater than the value specified\n validate: {Function|RegExp|Array} - Creates a validator for this path. ",
"description": "schema",
"scope": ""
},
"mongodb element": {
"prefix": "QQ:mongo:type-element-regex",
"body": " $$1\n//! Element query \n//! $$exists (gunakan Boolean true/false) \n//! db.records.find( { property: { $$exists: true } } )\n\n//! $$type (gunakan type data)\n//! double , string , boolean, null , array , object, undefined, date , minKey, maxKey\n//! db.addressBook.find( { \"zipCode\" : { $$type : \"string\" } } );\n\n//! $$regex (reguler expression) \n//! list options (i(uppercase, dan lowercase),m (anchors pattern ^, $),x (extended ignore all white space),s(allow dot character))\n//! db.products.find( { sku: { $$regex: /789$/ } } ) == SELECT * FROM products WHERE sku like \"%789\";\n//! db.products.find( { description: { $$regex: /^S/, $$options: 'm' } } )\n",
"description": ":element-type-regex",
"scope": ""
},
"mongodb preexisting data": {
"prefix": "QQ:mongo:preexisting-data",
"body": "$1let db = mongoose.connection;\ndb.once('open', function callback() {\n db.db.collection('blogs',function(err,data){\n data.insert({title:\"KINO 6\",desc:\"auto\"},function(err,output){\n console.log(output);\n })\n });\n});",
"description": "data",
"scope": ""
},
"MOBILE-check": {
"prefix": "QQ:js-media-queries|orientation",
"body": "// xs max-width: 575; sm min-width 576, md min-width 768, lg min-width 992, xl min-width 1200 , orientation: portrait\nvar ${1:medQ} = window.matchMedia(\"(${2:min-width: 700px})\");\n$1.addListener(function(e){\n if(e.matches){\n alert('match');\n }\n});\n",
"description": "media queries dan orientation javacsript",
"scope": ""
},
"MEJS 1": {
"prefix": "ejs",
"body": "<% $1 ${2:%>}",
"description": "ejs",
"scope": ""
},
"esj 2": {
"prefix": "ejss",
"body": "<%= $1 ${2:%>}",
"description": "ejs",
"scope": ""
},
"backend": {
"prefix": "QQ:backend-model",
"body": "const express = require('express');//express framework \nconst app = express();\nconst bodyParse = require('body-parser'); // pas request body menjadi object\nconst expressSanitizer = require('express-sanitizer'); // memfilter script tag pada req.body property \nconst methodOverride = require('method-override');// mengoverride method dari html form agar bisa digunakan dengan PUT dan DELETE REQUEST \nconst cors = require('cors'); // set server untuk cors request \nconst mongoose = require('mongoose'); // mongodb interface\nconst axios = require('axios'); // XMLHttpRequest Method \n\n//! app USE \napp.use(bodyParse.urlencoded({extended:true}));\napp.use(expressSanitizer()); // req.body.property = req.sanitize(req.body.property);\napp.use(methodOverride('_method')); // \napp.use(cors());\napp.use(express.static('public'));\napp.set('view engine','ejs');\n\n//! DATABASE \nmongoose.connect('mongodb://localhost/${1:blog}');\nlet ${2:schema1} = {\n title:String,\n image:{type:String,default:\"https://vignette.wikia.nocookie.net/kinosjourney/images/3/37/81mIsoY24GL.jpg/revision/latest?cb=20171023161951\"},\n body:String,\n date:{type:Date, default:Date.now()}\n};\nlet $2Plan = new mongoose.Schema($2);\nlet ${3:blog} = mongoose.model('$3',$2Plan);\n\n//! ROUTE \n//? character route = /blog/[@]edit , param route= /blog/:id , regex route = /^/(api|rest)/.+$/ , callback route= app.get('/test', [cb0, cb1])// INDEX \napp.get('/',function(req,res){\n\n});\n// SHOW , NEW ,CREATE , EDIT , UPDATE , DELETE \n\n//!SERVER\n//? app.list(process.env.PORT, process.env.IP, function(){console.log()}) , digunakan pada layanan hosting\napp.listen(3000,function(){\n console.log('http://localhost:3000');\n\n\nfunction mongoe(name,schema){\n var catSchema = new mongoose.Schema(schema);\n var name= mongoose.model(name, catSchema);\n return name;\n}});",
"description": "backend",
"scope": ""
},
"backend2": {
"prefix": "QQ:backend-routing-model",
"body": "// //! routing \n// // INDEX\n// app.get('/',function(req,res){\n// blog.find({},function(err,data){\n// res.render('index',{data:data});\n// });\n// });\n// //! SHOW\n// app.get('/blog',function(req,res){\n// blog.find({},function(err,data){\n// res.render('blog',{data:data});\n// });\n// });\n// //! NEW\n// app.get('/blog/new',function(req,res){\n// res.render('newBlog');\n// });\n// //!CREATE \n// app.post('/blog',function(req,res){\n// let newBlog = req.body.blog;\n// console.log(newBlog);\n// blog.create(newBlog,function(err,data){\n// console.log(data);\n// res.redirect('blog');\n// });\n// });\n\n// //! SHOW \n// app.get('/blog/:id',function(req,res){\n// let id = req.params.id;\n// blog.find({_id:id},function(err,data){\n// res.render('fullBlog',{data:data});\n// });\n// });\n\n// //! EDIT \n// app.get('/blog/:id/edit',function(req,res){\n// // res.send('work');\n// let id = req.params.id;\n// blog.find({_id:id},function(err,data){\n// res.render('editBlog',{data:data});\n// });\n// });\n\n// //! UPDATE \n// app.put('/blog/:id',function(req,res){\n// blog.update({_id:req.params.id},{$set:req.body.blog},function(err,data){\n// res.redirect(\"/blog/\"+req.params.id);\n// });\n// });\n\n// //! DELETE \n// app.delete('/blog/:id',function(req,res){\n// blog.remove({_id:req.params.id},function(err,data){\n// res.redirect('/blog/');\n// });\n// })\n// //! server \n// app.listen(3000,function(){\n// console.log('http://localhost:3000');\n// });\n",
"description": "backend2",
"scope": ""
},
"npm init": {
"prefix": "QQ:npm!-project-init",
"body": "// var express = require('express'),\n// app = express(),\n// bodyParser = require('body-parser'),\n// cookieParser = require('cookie-parser'),\n// methodOverride = require('method-override'),\n// expressSanitizer = require('express-sanitizer'),\n// cors = require('cors'),\n// session = require('express-session'),\n// passport = require('passport'),\n// passportLocal = require('passport-local'),\n// axios = require('axios'),\n// mongoose = require('mongoose'),\n// flash = require('connect-flash'),\n// morgan = require('morgan'),\n// bcrypt = require('bcrypt-nodejs'),\n// port = process.env.PORT || 3000;\n\nnpm init\nnpm install express ejs body-parser cookie-parser method-override express-session express-sanitizer axios cors passport passport-local passport-google-oauth morgan connect-flash mongoose jsdom-quokka-plugin bcrypt-nodejs --save \nnpm install -g nodemon\nnodemon server.js // gunakan di packageJSON",
"description": "init",
"scope": ""
},
"npm backend passport": {
"prefix": "QQ:npm-passport.js",
"body": "// config/passport.js\n\n// load all the things we need\nvar LocalStrategy = require('passport-local').Strategy;\nvar FacebookStrategy = require('passport-facebook').Strategy;\nvar TwitterStrategy = require('passport-twitter').Strategy;\nvar GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;\nvar InstagramStrategy = require('passport-instagram').Strategy;\n\n// load up the user model\nvar User = require('../app/models/user');\n\nvar configAuth = require('./auth');\n\n// expose this function to our app using module.exports\nmodule.exports = function(passport) {\n\n // =========================================================================\n // passport session setup ==================================================\n // =========================================================================\n // required for persistent login sessions\n // passport needs ability to serialize and unserialize users out of session\n\n // used to serialize the user for the session\n passport.serializeUser(function(user, done) {\n done(null, user.id);\n });\n\n // used to deserialize the user\n passport.deserializeUser(function(id, done) {\n User.findById(id, function(err, user) {\n done(err, user);\n });\n });\n\n // =========================================================================\n // LOCAL SIGNUP ============================================================\n // =========================================================================\n // we are using named strategies since we have one for login and one for signup\n // by default, if there was no name, it would just be called 'local'\n\n passport.use('local-signup', new LocalStrategy({\n // by default, local strategy uses username and password, we will override with email\n usernameField : 'email', //secara default username bukan email\n passwordField : 'password',\n passReqToCallback : true // allows us to pass back the entire request to the callback\n },\n function(req, email, password, done) {\n\n // asynchronous\n // User.findOne wont fire unless data is sent back\n process.nextTick(function() {\n\n // find a user whose email is the same as the forms email\n // we are checking to see if the user trying to login already exists\n User.findOne({ 'local.email' : email }, function(err, user) {\n // if there are any errors, return the error\n if (err)\n return done(err);\n\n // check to see if theres already a user with that email\n if (user) {\n return done(null, false, req.flash('signupMessage', 'That email is already taken.'));\n } else {\n\n // if there is no user with that email\n // create the user\n var newUser = new User();\n\n // set the user's local credentials\n newUser.local.email = email;\n newUser.local.password = newUser.generateHash(password);\n\n // save the user\n newUser.save(function(err) {\n if (err)\n throw err;\n return done(null, newUser, req.flash('success','berhasil daftar'));\n });\n }\n\n }); \n\n });\n\n }));\n passport.use('local-login', new LocalStrategy({\n // by default, local strategy uses username and password, we will override with email\n usernameField : 'email',\n passwordField : 'password',\n passReqToCallback : true // allows us to pass back the entire request to the callback\n },\n function(req, email, password, done) { // callback with email and password from our form\n\n // find a user whose email is the same as the forms email\n // we are checking to see if the user trying to login already exists\n User.findOne({ 'local.email' : email }, function(err, user) {\n // if there are any errors, return the error before anything else\n if (err)\n return done(err);\n\n // if no user is found, return the message\n if (!user)\n return done(null, false, req.flash('loginMessage', 'No user found.')); // req.flash is the way to set flashdata using connect-flash\n\n // if the user is found but the password is wrong\n if (!user.validPassword(password))\n return done(null, false, req.flash('loginMessage', 'Oops! Wrong password.')); // create the loginMessage and save it to session as flashdata\n\n // all is well, return successful user\n return done(null, user, req.flash('success','berhasil login'));\n });\n\n }));\n\n // =========================================================================\n // FACEBOOK ================================================================\n // =========================================================================\n passport.use(new FacebookStrategy({\n\n // pull in our app id and secret from our auth.js file\n clientID : configAuth.facebookAuth.clientID,\n clientSecret : configAuth.facebookAuth.clientSecret,\n callbackURL : configAuth.facebookAuth.callbackURL\n\n },\n\n // facebook will send back the token and profile\n function(token, refreshToken, profile, done) {\n\n // asynchronous\n process.nextTick(function() {\n\n // find the user in the database based on their facebook id\n User.findOne({ 'facebook.id' : profile.id }, function(err, user) {\n\n // if there is an error, stop everything and return that\n // ie an error connecting to the database\n if (err)\n return done(err);\n\n // if the user is found, then log them in\n if (user) {\n return done(null, user); // user found, return that user\n } else {\n // if there is no user found with that facebook id, create them\n var newUser = new User();\n\n // set all of the facebook information in our user model\n newUser.facebook.id = profile.id; // set the users facebook id \n newUser.facebook.token = token; // we will save the token that facebook provides to the user \n newUser.facebook.name = profile.name.givenName + ' ' + profile.name.familyName; // look at the passport user profile to see how names are returned\n newUser.facebook.email = profile.emails[0].value; // facebook can return multiple emails so we'll take the first\n\n // save our user to the database\n newUser.save(function(err) {\n if (err)\n throw err;\n\n // if successful, return the new user\n return done(null, newUser);\n });\n }\n\n });\n });\n\n }));\n // =========================================================================\n // TWITTER =================================================================\n // =========================================================================\n passport.use(new TwitterStrategy({\n\n consumerKey : configAuth.twitterAuth.consumerKey,\n consumerSecret : configAuth.twitterAuth.consumerSecret,\n callbackURL : configAuth.twitterAuth.callbackURL\n\n },\n function(token, tokenSecret, profile, done) {\n\n // make the code asynchronous\n // User.findOne won't fire until we have all our data back from Twitter\n process.nextTick(function() {\n\n User.findOne({ 'twitter.id' : profile.id }, function(err, user) {\n\n // if there is an error, stop everything and return that\n // ie an error connecting to the database\n if (err)\n return done(err);\n\n // if the user is found then log them in\n if (user) {\n return done(null, user); // user found, return that user\n } else {\n // if there is no user, create them\n var newUser = new User();\n\n // set all of the user data that we need\n newUser.twitter.id = profile.id;\n newUser.twitter.token = token;\n newUser.twitter.username = profile.username;\n newUser.twitter.displayName = profile.displayName;\n\n // save our user into the database\n newUser.save(function(err) {\n if (err)\n throw err;\n return done(null, newUser);\n });\n }\n });\n\n });\n\n }));\n // =========================================================================\n // GOOGLE ==================================================================\n // =========================================================================\n passport.use(new GoogleStrategy({\n\n clientID : configAuth.googleAuth.clientID,\n clientSecret : configAuth.googleAuth.clientSecret,\n callbackURL : configAuth.googleAuth.callbackURL,\n\n },\n function(token, refreshToken, profile, done) {\n\n // make the code asynchronous\n // User.findOne won't fire until we have all our data back from Google\n process.nextTick(function() {\n\n // try to find the user based on their google id\n User.findOne({ 'google.id' : profile.id }, function(err, user) {\n if (err)\n return done(err);\n\n if (user) {\n\n // if a user is found, log them in\n return done(null, user);\n } else {\n // if the user isnt in our database, create a new user\n var newUser = new User();\n\n // set all of the relevant information\n newUser.google.id = profile.id;\n newUser.google.token = token;\n newUser.google.name = profile.displayName;\n newUser.google.email = profile.emails[0].value; // pull the first email\n\n // save the user\n newUser.save(function(err) {\n if (err)\n throw err;\n return done(null, newUser);\n });\n }\n });\n });\n\n }));\n // =========================================================================\n // INSTAGRAM ==================================================================\n // =========================================================================\n passport.use(new InstagramStrategy({\n\n clientID : configAuth.instagramAuth.clientID,\n clientSecret : configAuth.instagramAuth.clientSecret,\n callbackURL : configAuth.instagramAuth.callbackURL,\n\n },\n function(token, refreshToken, profile, done) {\n\n // make the code asynchronous\n // User.findOne won't fire until we have all our data back from Google\n process.nextTick(function() {\n\n // try to find the user based on their google id\n User.findOne({ 'instagram.id' : profile.id }, function(err, user) {\n if (err)\n return done(err);\n\n if (user) {\n\n // if a user is found, log them in\n return done(null, user);\n } else {\n // if the user isnt in our database, create a new user\n var newUser = new User();\n\n // set all of the relevant information\n newUser.instagram.id = profile.id;\n newUser.instagram.token = token;\n newUser.instagram.name = profile.displayName;\n newUser.instagram.email = profile.emails[0].value; // pull the first email\n\n // save the user\n newUser.save(function(err) {\n if (err)\n throw err;\n return done(null, newUser);\n });\n }\n });\n });\n\n }));\n};\n",
"description": "config/passport.js",
"scope": ""
},
"npm backend user": {
"prefix": "QQ:npm-user.js",
"body": "// app/models/user.js\n// load the things we need\nvar mongoose = require('mongoose');\nvar bcrypt = require('bcrypt-nodejs');\n\n// define the schema for our user model\nvar userSchema = mongoose.Schema({\n\n local : {\n email : String,\n password : String,\n },\n facebook : {\n id : String,\n token : String,\n name : String,\n email : String\n },\n twitter : {\n id : String,\n token : String,\n displayName : String,\n username : String\n },\n google : {\n id : String,\n token : String,\n email : String,\n name : String\n },\n instagram : {\n id : String,\n token : String,\n email : String,\n name : String\n }\n\n});\n\n// methods ======================\n// generating a hash\nuserSchema.methods.generateHash = function(password) {\n return bcrypt.hashSync(password, bcrypt.genSaltSync(8), null);\n};\n\n// checking if password is valid\nuserSchema.methods.validPassword = function(password) {\n return bcrypt.compareSync(password, this.local.password);\n};\n\n// create the model for users and expose it to our app\nmodule.exports = mongoose.model('User', userSchema);\n",
"description": "app/models/user.js",
"scope": ""
},
"vue nuxt props": {
"prefix": "QQ:vue/nuxt-props",
"body": "props: {\n ${1:namaProp}: {\n type: ${2:Array},\n required: ${3:true},\n default: ${4:()=>['_id']}\n }\n},",
"description": "vue props",
"scope": ""
},
"vue form default": {
"prefix": "qq:vue-form-!-autophp",
"body": "\n\nimport autophp from '@/plugins/autophp.js'\nlet sdb = new autophp()\n\ndata() {\n return {\n vdata: {},\n btn: \"tambah\",\n };\n},\nmethods: {\n submit() {\n let that=this\n if (confirm(\"Apakah yakin proses dilanjutkan ?\")) {\n if (this.btn == \"tambah\") {\n //idnya letak di vdata\n delete this.vdata.id;\n sdb.collection(\"test\").doc().set(this.vdata).then((res) => {that.$$nuxt.$$emit('getData')});\n } else if (this.btn == \"update\") {\n sdb.collection(\"test\").doc().set(this.vdata).then((res) => {that.$$nuxt.$$emit('getData')});\n } else if (this.btn == \"delete\") {\n sdb.collection(\"test\").doc(this.vdata.id).delete().then((res) => {that.$$nuxt.$$emit('getData')});\n }\n }\n },\n},",
"description": "vue form default",
"scope": ""
},
"html selected vue": {
"prefix": "QQ:vue-form-select-input",
"body": "\n10 \n20 \n50 \n100 \n ",
"description": "select input",
"scope": ""
},
"vue v-select": {
"prefix": "QQ:vue-form-v-select",
"body": "\n\n
",
"description": "textarea input",
"scope": ""
},
"html radio vue": {
"prefix": "QQ:vue-form-radio-input",
"body": "One \nTwo ",
"description": "radio input",
"scope": ""
},
"html checkbox vue": {
"prefix": "QQ:vue-form-checkbox-input",
"body": "\ntaufik \nakbar \nmaliki ",
"description": "checkbox input",
"scope": ""
},
"html datepicker buefy": {
"prefix": "QQ:buefy-form-datepicker-input",
"body": "\n//NOTE data = tanggal : null \n\n ",
"description": "datepicker input",
"scope": ""
},
"html jampicker buefy": {
"prefix": "QQ:buefy-form-jampicker/timepicker-input",
"body": "\n//NOTE data = jam : null \n\n \n ",
"description": "jampicker timepicker input",
"scope": ""
},
"html input file drag-drop buefy": {
"prefix": "QQ:buefy-form-inputfile-dragndrop-input",
"body": " \n\n \n \n \n \n
\n
\n
Drop your files here or click to upload
\n
\n \n \n \n \n {{file.name}}\n \n
\n ",
"description": "input file drag n drop input",
"scope": ""
},
"html switch buefy": {
"prefix": "QQ:buefy-form-switch-input",
"body": "\n\n {{ vdata.switchData }} \n
",
"description": "switch input",
"scope": ""
},
"html tag input buefy": {
"prefix": "QQ:buefy-form-tag-input",
"body": "\n\n ",
"description": "tag input",
"scope": ""
},
"vue lazy component": {
"prefix": "QQ:vue-lazy-load-component",
"body": "${1:\n}\n$2\n ",
"description": "vue lazy load component",
"scope": ""
},
"vue carousel": {
"prefix": "QQ:vue-component-carousel",
"body": " \n Slide 1 Content \n Slide 2 Content \n\nimport { Carousel, Slide } from 'vue-carousel';\n${1:\nCarousel,\nSlide\n}",
"description": "vue carousel",
"scope": ""
},
"vue radial circle progress": {
"prefix": "QQ:vue-component-radial/circle-progress",
"body": "\n \n
\n Total steps: {{ totalSteps }}
\n Completed steps: {{ completedSteps }}
\n \n + \n - \n \n",
"description": "vue radial/circle progress",
"scope": ""
},
"vue json to excel": {
"prefix": "QQ:vue-component-json2excel-excel2json",
"body": " tags = newTags\"\n/>\nautoTag:[\n {text:'taufik},\n {text:'akbar},\n {text:'maliki},\n]",
"description": "vue tag auto input",
"scope": ""
},
"bar chart": {
"prefix": "QQ:vue-chart-bar",
"body": "\n \n \n
\n \n",
"description": "vue chartbar",
"scope": ""
},
"Radar chart": {
"prefix": "QQ:vue-chart-radar",
"body": "\n \n \n
\n \n",
"description": "vue chart radar",
"scope": ""
},
"Bubble chart": {
"prefix": "QQ:vue-chart-bubble",
"body": "\n \n \n
\n \n",
"description": "vue chart bubble",
"scope": ""
},
"doughnut chart": {
"prefix": "QQ:vue-chart-doughnut",
"body": "\n \n \n
\n \n",
"description": "vue chart doughnut",
"scope": ""
},
"Horizontal Bar chart": {
"prefix": "QQ:vue-chart-Horizontal-Bar",
"body": "\n \n \n
\n \n",
"description": "vue chart Horizontal Bar",
"scope": ""
},
"Line chart": {
"prefix": "QQ:vue-chart-line",
"body": "\n \n \n
\n \n",
"description": "vue chart line",
"scope": ""
},
"Pie chart": {
"prefix": "QQ:vue-chart-pie",
"body": "\n \n \n",
"description": "vue chart pie",
"scope": ""
},
"Polar chart": {
"prefix": "QQ:vue-chart-polar",
"body": "\n \n \n",
"description": "vue chart polar",
"scope": ""
},
"Scatter chart": {
"prefix": "QQ:vue-chart-scatter",
"body": "\n \n \n
\n \n",
"description": "vue chart scatter",
"scope": ""
},
"vue mediaqueries": {
"prefix": "QQ:vue-media-queries",
"body": " created() {\n window.addEventListener(\"resize\", this.handleResize);\n this.handleResize();\n },\n destroyed() {\n window.removeEventListener(\"resize\", this.handleResize);\n },\n methods: {\n handleResize() {\n this.mdq =\n window.innerWidth <= 576\n ? \"sm\"\n : window.innerWidth <= 768\n ? \"md\"\n : window.innerWidth <= 992\n ? \"lg\"\n : \"xl\";\n }\n }",
"description": "vue media queries",
"scope": ""
},
"php shorthand": {
"prefix": "QQ:php-shorthand",
"body": "php array shorthand \n- $$list = [];\n- $$list[0]='hello;\n- $$list[0]['test']='bau'; / [{test:bau}]\n\nphp object shorthand\n- $$object = (object) ['foo'=>'bla', 'bar'=>2];",
"description": "php shorthand",
"scope": ""
},
"component dropdown": {
"prefix": "QQ:vue-component-dropdown",
"body": " ",
"description": "vue component dropdown",
"scope": ""
},
"component table": {
"prefix": "QQ:vue-component-dropdown",
"body": "// di cli untuk membuat react app\nnpm install redux redux-logger redux-thunk react-redux tachyons --save\n\nlet uri='';\nif(process.env.PORT){\n uri = 'mongodb+srv://akbar:akbar@maliki-wb5zi.mongodb.net/test?retryWrites=true';\n // let uri2 = 'mongodb://maliki:05101995ptqpqoot@ds125211.mlab.com:25211/maliki';\n}else{\n uri = 'mongodb://localhost/auth5';\n}\nmongoose.connect(uri);\n//mongoose.connect(process.env.DATABASEURL); //saat sudah deploying aplikasi\n\nrequire('./config/passport')(passport); // pass passport for configuration\n\napp.use(morgan('dev'));\napp.use(express.static(__dirname+'/public'));\napp.use(bodyParser.urlencoded({extended:true}));\napp.use(cookieParser());\napp.use(methodOverride('_method'));\napp.use(expressSanitizer());\napp.use(cors());\napp.use(session({\n secret:'taufikakbarmaliki',\n resave:false,\n saveUninitialized:false,\n cookie:{maxAge:3600000}\n}));\napp.locals.moment = moment;//<%= moment(comment.created).fromNow() %>\napp.use(flash());\napp.use(passport.initialize());\napp.use(passport.session());\napp.set('view engine','ejs');\napp.use(function(req,res,next){\n res.locals.currentUser = req.user;\n res.locals.error = req.flash('error');\n res.locals.success = req.flash('success');\n\n // <% let path=''; if(pathLength>1){ %>\n // <% for(i=0;i\n res.locals.pathLength = req.originalUrl.match(///g).length;\n next();\n});\n\n\n// routes ======================================================================\nrequire('./app/routes.js')(app, passport, mongoose); // load our routes and pass in our app and fully configured passport\n\n// require('./seed')();\n\napp.listen(port,portIP,function(){\n console.log('http://localhost:8080');\n});\n",
"description": "server.js",
"scope": ""
},
"npm upload file": {
"prefix": "QQ:npm-upload-post",
"body": "app.post('/upload/:id',function(req,res){\n if (!req.files.images)//images nama dari file input type file\n {\n req.flash('error','no file uploaded');\n res.redirect('back');\n }else{\n if(req.files.images.constructor.name == \"Array\"){\n let images = req.files.images;\n let imgLength = images.length;\n images.forEach((img,index)=>{\n console.log(index,imgLength);\n img.mv('./public/upload/'+img.name, function(err) {\n if(index==imgLength-1){\n if (err)\n {\n req.flash('error','ada masalah saat proses upload');\n res.redirect('/back/'+req.params.id);\n }\n req.flash('success','berhasil upload');\n res.redirect('/blog/'+req.params.id);\n }\n });\n });\n }else{\n let images = req.files.images;\n images.mv('./public/upload/'+images.name, function(err) {\n if (err)\n {\n req.flash('error','ada masalah saat proses upload');\n res.redirect('back');\n }\n req.flash('success','berhasil upload');\n res.redirect('/blog/'+req.params.id);\n });\n }\n }\n });",
"description": "upload",
"scope": ""
},
"npm send email": {
"prefix": "QQ:nodemailer-npm-send-email",
"body": "var transporter = nodemailer.createTransport({\n service: 'gmail',\n auth: {\n user: 'mrrudyska@gmail.com',\n pass: '##05101995##'\n }\n });\n \n var mailOptions = {\n from: 'mrrudyska@gmail.com',\n to: 'taufikakbarmalikitkj@gmail.com, mrrudyska@gmail.com',\n subject: 'Sending Email using Node.js',\n text: 'That was easy!'\n };\n \n transporter.sendMail(mailOptions, function(error, info){\n if (error) {\n console.log(error);\n } else {\n console.log('Email sent: ' + info.response);\n }\n });",
"description": "nodemailer.js",
"scope": ""
},
"mysql !": {
"prefix": "QQ:mysql-!-sql",
"body": "// SQL PAGINATION\nSELECT * FROM berita order by id desc LIMIT 10 OFFSET 0 \n// SQL JOIN \nSELECT * FROM berita tb1 left join user tb2 on tb2.id_user=tb1.createdBy \n// SQL SELECT * KECUALI PASSWORD = NULL \nselect *, NULL AS password from tbuser\n//! INSERT \nINSERT into tbl_test (id_pesan,id_penerima) values ('$$idp','$$id_penerima')\n//! UPDATE \nUPDATE tbl_test set status_pengirim='$$text' where no='$$id_pesan'\n//! DELETE \nDELETE from tbl_test where id_property='$$id_property'\n",
"description": "mysql sql !",
"scope": ""
},
"node mysql": {
"prefix": "QQ:node-mysql-query",
"body": " mysql.query(\n `INSERT into tbl_pegawai (nip,nama) VALUES (${req.body.nip},'${\n req.body.nama\n }')`,\n function(err, result,field) {\n if (err) {\n console.log(err)\n }\n console.log(result)\n res.json({\n data: result\n })\n }\n )",
"description": "node mysql.js",
"scope": ""
},
"node mysql multiple": {
"prefix": "QQ:node-mysql-query-multiple-?",
"body": "var mysql = require('mysql');\nvar con = mysql.createConnection({\n host: \"localhost\",\n user: \"yourusername\",\n password: \"yourpassword\",\n database: \"mydb\"\n});\ncon.connect(function(err) {\n if (err) throw err;\n console.log(\"Connected!\");\n var sql = \"INSERT INTO customers (name, address) VALUES ?\";\n var values = [\n ['William', 'Central st 954'],\n ['Chuck', 'Main Road 989'],\n ['Viola', 'Sideway 1633']\n ];\n con.query(sql, [values], function (err, result) {\n if (err) throw err;\n console.log(\"Number of records inserted: \" + result.affectedRows);\n });\n});",
"description": "node mysql.js multiple",
"scope": ""
},
"node mysql connection": {
"prefix": "QQ:node-mysql-connection",
"body": "var conMysql = require('mysql')\nvar mysql = conMysql.createConnection({\n host: 'localhost',\n user: 'root',\n password: '',\n database: 'dbpegawai'\n})\n\nmysql.connect(function(err) {\n if (err) {\n console.error('error connecting: ' + err.stack)\n return\n }\n console.log('connected as id ' + mysql.threadId)\n})\n",
"description": "node mysql.js connection",
"scope": ""
},
"node mysql connection string": {
"prefix": "QQ:node-mysql-connection-string",
"body": "var conMysql = require('mysql')\nvar mysql = conMysql.createConnection('mysql://user:pass@host/db?debug=true&charset=BIG5_CHINESE_CI&timezone=-0700');\n\nmysql.connect(function(err) {\n if (err) {\n console.error('error connecting: ' + err.stack)\n return\n }\n console.log('connected as id ' + mysql.threadId)\n})\n",
"description": "node mysql.js connection string",
"scope": ""
},
"socket.io": {
"prefix": "QQ:socket.io-server",
"body": "io.on('connection', socket => {\n socket.on('last-messages', function(fn) {\n fn(messages.slice(-50))\n })\n socket.on('send-message', function(message) {\n messages.push(message)\n socket.broadcast.emit('new-message', message)\n })\n})\n",
"description": "socket.io",
"scope": ""
},
"socket io script": {
"prefix": "QQ:socket-script-all-client",
"body": "",
"description": "socket.io",
"scope": ""
},
"socket io script 2": {
"prefix": "QQ:socket-script-all-php",
"body": "\n \n
inserts \n
getdata \n
deletes \n
\n
{{item}}
\n
\n",
"description": "socket.io 2",
"scope": ""
},
"socket io script 3": {
"prefix": "QQ:socket-refresh-php-only",
"body": "\n \n refresh \n
\n \n",
"description": "socket.io 3",
"scope": ""
},
"socket.io cheat sheet": {
"prefix": "QQ:socket.io-cheat-sheet",
"body": "// sending to the client\nsocket.emit('hello', 'can you hear me?', 1, 2, 'abc');\n\n// sending to all clients except sender\nsocket.broadcast.emit('broadcast', 'hello friends!');\n\n// sending to all clients in 'game' room except sender\nsocket.to('game').emit('nice game', 'let's play a game');\n\n// sending to all clients in 'game1' and/or in 'game2' room, except sender\nsocket.to('game1').to('game2').emit('nice game', 'let's play a game (too)');\n\n// sending to all clients in 'game' room, including sender\nio.in('game').emit('big-announcement', 'the game will start soon');\n\n// sending to all clients in namespace 'myNamespace', including sender\nio.of('myNamespace').emit('bigger-announcement', 'the tournament will start soon');\n\n// sending to a specific room in a specific namespace, including sender\nio.of('myNamespace').to('room').emit('event', 'message');\n\n// sending to individual socketid (private message)\nio.to(`${socketId}`).emit('hey', 'I just met you');\n\n// WARNING: `socket.to(socket.id).emit()` will NOT work, as it will send to everyone in the room\n// named `socket.id` but the sender. Please use the classic `socket.emit()` instead.\n\n// sending with acknowledgement\nsocket.emit('question', 'do you think so?', function (answer) {});\n\n// sending without compression\nsocket.compress(false).emit('uncompressed', 'that's rough');\n\n// sending a message that might be dropped if the client is not ready to receive messages\nsocket.volatile.emit('maybe', 'do you really need it?');\n\n// specifying whether the data to send has binary data\nsocket.binary(false).emit('what', 'I have no binaries!');\n\n// sending to all clients on this node (when using multiple nodes)\nio.local.emit('hi', 'my lovely babies');\n\n// sending to all connected clients\nio.emit('an event sent to all connected clients');",
"description": "socket.io cheat sheet",
"scope": ""
},
"socket.io client ": {
"prefix": "QQ:socket.io-client",
"body": "",
"description": "socket.io client",
"scope": ""
},
"utf8": {
"prefix": "QQ:utf8-decode-encode",
"body": "utf8.encode('\xA9');\n// → '\xC2\xA9'\nutf8.decode('\xC2\xA9');\n// → '\xA9'",
"description": "utf8",
"scope": ""
},
"import autophp": {
"prefix": "QQ:vue-autophpjs",
"body": "import autophp from '@/plugins/autophp';\nlet sdb = new autophp();",
"description": "autophp js",
"scope": ""
},
"file autophp.js": {
"prefix": "QQ:file-autophp.js",
"body": "import axios from 'axios'\nlet auth = true;\nlet table = \"\";\nlet id = \"\";\nlet header = localStorage.getItem('auth._token.local');\nlet that = this;\nlet urlBASE = auth ? \"http://localhost:8080/auto/api2.php\" : \"http://localhost:8080/auto/api.php\";\nclass autophp {\n collection(tables) {\n table = tables;\n return this;\n }\n doc(ids) {\n if (ids) {\n // that.vdata.id = ids;\n id = ids;\n }\n return this;\n }\n async set(vdata) {\n let fd = new FormData();\n // if (id != \"\") {\n // vdata.id = id;\n // }\n if (auth) {\n fd.append('header', header)\n }\n fd.append(\"table\", table);\n fd.append(\"data\", JSON.stringify(vdata));\n fd.append(\"type\", \"set\");\n fd.append(\"key\", getKey(vdata));\n\n function getKey(data) {\n return Object.keys(data);\n }\n return await axios.post(urlBASE, fd).then(res => {\n console.log(res);\n return res.data;\n }).catch(err=>{\n console.log('table not found')\n this.set(vdata)\n })\n }\n async get(vdata) {\n let fd = new FormData();\n fd.append(\"table\", table);\n if (auth) {\n fd.append('header', header)\n }\n fd.append(\"select\", vdata);\n if (id.length != \"\") {\n fd.append(\"id\", `$${id}`);\n }\n fd.append(\"type\", \"get\");\n return await axios.post(urlBASE, fd).then(res => {\n console.log(res);\n return res.data;\n }).catch(err=>{\n console.log('table not found')\n })\n }\n async delete(vdata) {\n let fd = new FormData();\n if (auth) {\n fd.append('header', header)\n }\n fd.append(\"table\", table);\n fd.append(\"select\", vdata);\n if (id.length != \"\") {\n fd.append(\"id\", `$${id}`);\n }\n fd.append(\"type\", \"delete\");\n return await axios.post(urlBASE, fd).then(res => {\n console.log(res);\n return res.data;\n }).catch(err=>{\n console.log('Data tidak ditemukan')\n })\n }\n async select(vdata) {\n let fd = new FormData();\n if (auth) {\n fd.append('header', header)\n }\n fd.append(\"table\", table);\n fd.append(\"select\", vdata);\n if (id.length != \"\") {\n fd.append(\"id\", `$${id}`);\n }\n fd.append(\"type\", \"select\");\n return await axios.post(urlBASE, fd).then(res => {\n console.log(res);\n return res.data;\n }).catch(err=>{\n console.log('table not found')\n })\n }\n}\n\nexport default autophp",
"description": "autophp js",
"scope": ""
},
"vue wysiwyg": {
"prefix": "QQ:vue-component-wysiwyg",
"body": " {\n fd.append('photos',data);\n fd.append('filename',img[i].name);\n });\n}\nthis.$nuxt.$emit('busyOn',true);\nsetTimeout(() => {\n that.$axios.post('/api/data/gambar',fd,{\n headers:{\n Authorization \":that.$auth.$storage._state['_token.local']\n }\n }).then(res=>{\n this.$nuxt.$emit('busyOn',false);\n console.log(res.data);\n })\n}, 1000); ",
"description": "ngambar compress",
"scope": ""
},
"heroku command": {
"prefix": "QQ:npm-heroku-cli(command)",
"body": "heroku login \ntaufikakbarmalikitkj@gmail.com\n##05101995ptqpqoot##\n\n$1\n\nIf you haven't already, log in to your Heroku account and follow the prompts to create a new SSH public key.\n\n$ heroku login\nClone the repository\nUse Git to clone fast-gorge-49875's source code to your local machine.\n\nhttps://nuxt-4848.herokuapp.com\nheroku git:remote -a fast-gorge-49875\n$ heroku git:clone -a fast-gorge-49875\n$ cd fast-gorge-49875\nDeploy your changes\nMake some changes to the code you just cloned and deploy them to Heroku using Git.\n\n$ git add .\n$ git commit -am 'make it better'\n$ git push heroku master\n\n//mengakses yang ada\ngit init\nheroku git:remote -a \n//menghapus / clean\n> cd /my-project/\n> heroku plugins:install heroku-repo\n> heroku repo:reset\nheroku config:set NPM_CONFIG_PRODUCTION=false\nheroku config:set HOST=0.0.0.0\nheroku config:set NODE_ENV=production\n\nhttps://fast-gorge-49875.herokuapp.com/\n\n//mulai baru \nheroku create\n\n//git aplikasi yang sedang digunakan oleh heroku\ngit remote -v\n\n//mengambil semua git dari local dan upload ke database heroku web app\ngit push heroku master\ngit push fast-gorge-49875 master\n\n\n//ensure that at least one instance of the app is running\nheroku ps:scale web=1\n//untuk menonaktifkan dyno running\nheroku ps:scale web=0 \n\n// open heroku web app\nheroku open\n\n//untuk mencek semua log yang berjalan di web server \nheroku logs --tail \n\n//check many dyno yang berjalan\nheroku ps\n\n\n//untuk mencek terminal di heroku server\nheroku run bash ",
"description": "heroku model",
"scope": ""
},
"heroku command2": {
"prefix": "QQ:npm-heroku-deploy",
"body": "herok step by step deploy nuxt \n\n1. buat app di dashboard heroku \n2. klik deploy tab \n3. cli heroku login \n4. cli heroku git:clone -a iottaufik\n5. cli heroku config:set NPM_CONFIG_PRODUCTION=false\n6. heroku config:set HOST=0.0.0.0\n7. heroku config:set NODE_ENV=production\n8. $ git add .\n9. $ git commit -am \"make it better\"\n10. $ git push heroku master",
"description": "heroku model",
"scope": ""
},
"git command": {
"prefix": "QQ:npm-git-cli(command)",
"body": "git config --global user.name \"Taufik Akbar Maliki\"\ngit config --global user.email\ntaufik@gmail.com\n\n \n\ngit init //!memulai git di folder\ngit add //!add file untuk di track \ngit add *\ngit commit -m \"Commit Message\"\ngit commit -m \"Commit Message\" --no-verify //! agar mempercepat proses\ngit status //! mencek status dari semua file dalam folder git \ngit log //!mencek log history dari git\ngit branch //! membuat branch baru \ngit checkout //!memasuki suatu branch atau log branch \n\ngit checkout -b //! shortcut untuk membuat branch lalu memasuki branch nya langsung \n\nsaat berkontribusi dari master branch , pastikan untuk membuat fork sendiri untuk halaman kita \n\ngit clone /path/to/repository //!mengclone seluruh folder di repository >> https://github.com/AkbarMaliki/akbarmaliki.github.io.git\ngit push origin or master //!kirim perubahan ke master branch dari remote repository\ngit pull //! mengambil data terbaru dari github \nget merge \ngit remote -v //! cek perubahan dari master branch di repository \ngit remote add upstream http://repository //! meng add perubahan yang terjadi direpository ke fork \ngit pull upstream master //! mengambil data terbaru dari upstream master\n\n\ncara memindahkan master ke old commit \ngit checkout master\ngit reset --hard \nIf you then want to push it to the remote, you need to use the -f option.\ngit push -f origin master",
"description": "git model",
"scope": ""
},
"moment.js": {
"prefix": "QQ:npm-moment.js",
"body": "moment().format('MMMM Do YYYY, h:mm:ss a'); // Juli 5 2018, 12:07:33 siang\nmoment().format('dddd'); // Kamis\nmoment().format(\"MMM Do YY\"); // Jul 5 18\nmoment().format('YYYY [escaped] YYYY'); // 2018 escaped 2018\nmoment().format(); // 2018-07-05T12:07:33+08:00",
"description": "moment.js",
"scope": ""
},
//#REACT
"index.js di react": {
"prefix": "QQ:react-render",
"body": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport ${1:App} from './${1:App}';\nimport registerServiceWorker from './registerServiceWorker';\n\nReactDOM.render(<${1:App} />, document.getElementById('${2:root}'));\nregisterServiceWorker();\n",
"description": "react index.js",
"scope": ""
},
"app.js di react": {
"prefix": "QQ:react-app.js",
"body": "import React, { Component } from 'react';\nimport './${1:App}.css';\n\nclass $1 extends Component {\n render() {\n return (\n \n );\n }\n}\n\nexport default $1;",
"description": "react app.js",
"scope": ""
},
"react Componen": {
"prefix": "QQ:react-componen",
"body": "import React from 'react';\n\nconst ${1:namaComponen} = ({${2:prop}})=>{\n return(\n \n $3\n
\n );\n}\n\nexport default $1;",
"description": "react componen",
"scope": ""
},
"react action.js": {
"prefix": "QQ:react-redux-action.js",
"body": "import {\n CHANGE_SEARCH_FIELD,\n REQUEST_KITTENS_PENDING,\n REQUEST_KITTENS_SUCCESS,\n REQUEST_KITTENS_FAILED \n} from './constants'\n\nexport const setSearchField = (text) => {\n return{\n type: CHANGE_SEARCH_FIELD,\n payload: text \n }\n}\n\nexport const requestKittens = () => (dispatch) => {\n dispatch({ type: REQUEST_KITTENS_PENDING });\n fetch('https://jsonplaceholder.typicode.com/users')\n .then(res=>res.json())\n .then(data=>{\n return dispatch({type: REQUEST_KITTENS_SUCCESS, payload:data})})\n .catch(error=>{\n return dispatch({type: REQUEST_KITTENS_FAILED, payload:error});\n })\n}",
"description": "react componen",
"scope": ""
},
"react redux app.js": {
"prefix": "QQ:react-redux-app.js",
"body": "import React, {Component} from 'react';\nimport { connect } from \"react-redux\";\nimport Scroll from '../components/Scroll';\nimport ErrorBoundary from '../components/ErrorBoundary';\nimport CardList from '../components/CardList';\nimport SearchBox from '../components/SearchBox';\nimport { setSearchField, requestKittens } from \"../actions\";\n\n//! actions.js > mapStateToProps > state(list state sesuai yang dideklarasi di reducers)\n// mapStateToProps berfunsi menggantikan constructor di class App yang menampung state, dan \n// mapStateToProps menggantikan posisi class App state menjadi global state yang bisa diakses setiap componen\nconst mapStateToProps = state =>{\n return {\n searchField: state.searchKittens.searchField,\n kittens: state.requestKittens.kittens,\n isPending:state.requestKittens.isPending,\n error:state.requestKittens.error\n }\n}\n//mapDispathToProps berfungsi menaruh setiap yang direturnnya menjadi property dari App yang bisa diakses melalui this.props.\nconst mapDispatchToProps = (dispatch) => {\n return{\n //onSearchChange dan onRequestKittens adalah property yang berada pada App Component,\n // setSearchField datang dari actions.js , dimana berfungsi merubah value dari global state\n // event.target.value datang dari event change yang dari component SearchBox yang mem fire kan onSearchChange \n // event.target.value akan menjadi arguments di parameter yang ada di action.js pada setSearchField function \n onSearchChange: (event) => dispatch(setSearchField(event.target.value)), \n onRequestKittens: () => dispatch(requestKittens())\n } \n}\n\nclass App extends Component {\n render(){\n //mendestructurin object this.props menjadi pecahan variable dari property nya\n const { searchField, onSearchChange, kittens, isPending } = this.props;\n const listCat = kittens.filter(x=>{\n return x.name.toLowerCase().includes(searchField.toLowerCase())\n });\n if(isPending){\n return (\n LOADING...\n
);\n }else{\n return( \n //! passing data/event ke componen melalui custom property , dan custom property mengambil data/fungsi dari this.props object \n \n \n \n \n \n \n \n
);\n }\n }\n \n componentDidMount(){\n this.props.onRequestKittens();\n }\n}\nexport default connect(mapStateToProps, mapDispatchToProps)(App);",
"description": "react componen",
"scope": ""
},
"react reducer.js": {
"prefix": "QQ:react-redux-reducer.js",
"body": "import {\n CHANGE_SEARCH_FIELD,\n REQUEST_KITTENS_PENDING,\n REQUEST_KITTENS_SUCCESS,\n REQUEST_KITTENS_FAILED \n} from './constants';\n\nconst intialStateSearch = {\n searchField:''\n}\n\nconst intialStateKittens = {\n isPending:false,\n kittens:[],\n error: ''\n}\n\nexport const searchKittens = (state=intialStateSearch, action={}) => {\n switch(action.type){\n case CHANGE_SEARCH_FIELD:\n return Object.assign({},state, {searchField: action.payload});\n default:\n return state;\n }\n}\n\n\nexport const requestKittens = (state=intialStateKittens, action={}) => {\n switch(action.type){\n case REQUEST_KITTENS_PENDING:\n return Object.assign({},state, {isPending:true});\n case REQUEST_KITTENS_SUCCESS:\n return Object.assign({},state, { kittens:action.payload, isPending:false});\n case REQUEST_KITTENS_FAILED:\n return Object.assign({},state, { kittens:action.payload, isPending:false});\n default:\n return state;\n }\n}",
"description": "react componen",
"scope": ""
},
"react constants.js": {
"prefix": "QQ:react-redux-constants.js",
"body": "export const CHANGE_SEARCH_FIELD = 'CHANGE_SEARCHFIELD';\n\nexport const REQUEST_KITTENS_PENDING = 'REQUEST_KITTENS_PENDING';\nexport const REQUEST_KITTENS_SUCCESS = 'REQUEST_KITTENS_SUCCESS';\nexport const REQUEST_KITTENS_FAILED = 'REQUEST_KITTENS_FAILED';\n",
"description": "react componen",
"scope": ""
},
//VUE
"VUE Component": {
"prefix": "QQ:vue-note-component-boilerplater",
"body": " \n \n $1\n
\n \n\n\n",
"description": "vue componen",
"scope": ""
},
"VUE scrollactive": {
"prefix": "QQ:vue-component-scrollactive",
"body": "\n \n \n pos1 \n pos2 \n \n \n ",
"description": "vue scrollactive",
"scope": ""
},
"VUE touch": {
"prefix": "QQ:vue-component-touch",
"body": " \n \n
\n \n${1:\npan|panstart|panmove|panend|pancancel|panleft|panright|panup|pandown\npinch|pinchstart|pinchmove|pinchend|pinchcancel|pinchin|pinchout\npress|pressup\nrotate|rotatestart|rotatemove|rotateend|rotatecancel\nswipe|swipeleft|swiperight|swipeup|swipedown\ntap}",
"description": "vue touch",
"scope": ""
},
"VUE router": {
"prefix": "QQ:vue-router",
"body": ",{\n path: \"/login/:id\",\n name: \"login2\",\n component: loginId,\n //props: true,\n //children:[]\n}",
"description": "vue router",
"scope": ""
},
"VUE Reserved Element": {
"prefix": "QQ:vue-reserve-element",
"body": "$1 // digunakan agar component tidak dihapus di dom melainkan di hide\n \n\n ${3:data hover}\n ${2:text tips} \n
",
"description": "my-tips/tooltips",
"scope": ""
},
"socket io emit dan on": {
"prefix": "QQ:socket-on-emit",
"body": "client send > server watch \n//! ini di client method \nsocket.emit('kirim-pesan',data) // request koneksi ke event kirim-pesan dengan mengirim data\n\n//! ini di server \nsocket.on('kirim-pesan', function(message) { // socket memiliki fungsi mem watch event kirim-pesan\n messages.push(message) // update data di server messages\n // server merequest koneksi ke pesan-baru dengan mengirim data message\n socket.broadcast.emit('pesan-baru', message)\n})\n\n//! ini di client mounted/beforeMount\nsocket.on('pesan-baru', message => {\n this.messages.push(message) // update data di client messages\n})\n\n\nclient minta data dari server \n//! di client\nsocket.emit('minta-data',function(data1,data2){ // request ke event minta-data dengan meminta balik data \n let data = data1 // data1 diambil dari server \n})\n\n//! di server\nsocket.on('minta-data', function(fn){\n let data1 = 'hello';\n let data2 = 'world';\n fn(data1,data2) // data1,data2 akan dikirim balik ke event yang merequest nya\n})\n",
"description": "socket io emit dan on",
"scope": ""
},
"import component with lazyload": {
"prefix": "QQ:my-import-component-lazy",
"body": "Confirm: () => import('~/components/Web/Confirm.vue')",
"description": "import component with lazyload",
"scope": ""
},
"VUE head": {
"prefix": "QQ:vue-head",
"body": "head() {\n return {\n title: 'TaufikApp tempat share KnoWleDGE',\n meta: [\n {\n hid: 'description',\n name: 'description',\n content: 'Share documentasi hasil belajar disini yuk ...'\n },\n {\n name: 'keywords',\n content: 'blog,portofolio,freelance'\n },\n // FACEBOOK\n {\n property: `og:title`,\n content: `TaufikApp KnoWleDGE`\n },\n {\n property: `og:type`,\n content: `article`\n },\n {\n property: `og:url`,\n content: `${this.$$store.state.url}`\n },\n {\n property: `og:image`,\n content: `${this.$$store.state.url}/Kino.jpg`\n },\n {\n property: `og:description`,\n content: `documentasi ya`\n },\n //Twitter\n {\n name: 'twitter:card',\n content: `${this.$$store.state.url}/Kino.jpg`\n },\n {\n name: 'twitter:image:src',\n content: `${this.$$store.state.url}/Kino.jpg`\n },\n {\n name: 'twitter:site',\n content: '@TaufikApp'\n },\n {\n name: 'twitter:title',\n content: 'TaufikApp is a fuckin KnoWlEDG'\n },\n {\n name: 'twitter:description',\n content: 'twitter description'\n }\n ]\n }\n }",
"description": "meta head",
"scope": ""
},
"VUE meta ": {
"prefix": "QQ:vue-meta",
"body": "metaInfo() {\n return {\n title: \"Tentang TA_Maliki / Taufik Akbar Maliki\",\n meta: [\n {\n hid: \"description\",\n name: \"description\",\n content: \"Tentang Taufik akbar maliki / TA_Maliki\",\n },\n {\n property: \"og:title\",\n content: \"Tentang Taufik akbar maliki / TA_Maliki\",\n },\n { property: \"og:site_name\", content: \"TA_Maliki\" },\n { property: \"og:type\", content: \"website\" },\n {\n property: `og:url`,\n content: `${this.$$store.state.url}`,\n },\n {\n property: `og:image`,\n content: `${this.$$store.state.url}/Kino.jpg`,\n },\n {\n property: `og:description`,\n content: `documentasi ya`,\n },\n {\n name: \"keywords\",\n content: \"blog,portofolio,freelance\",\n },\n { name: \"robots\", content: \"index,follow\" },\n ],\n };",
"description": "vue meta ",
"scope": ""
},
"VUE meta 2 ": {
"prefix": "QQ:vue-meta-header-anchor",
"body": " TA_Maliki / Taufik Akbar Maliki \n- \ncontact \nabout \ncoffe \nportofolio \nproject \nsertifikat ",
"description": "vue meta header anchor",
"scope": ""
},
"nuxt query n parameter init": {
"prefix": "QQ:nuxt-query/parameter/watchquery-init",
"body": "// Watch for $$route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)\nwatchQuery: ['page'],\n// Key for (transitions)\nkey: to => to.fullPath,\n// Called to know which transition to apply\ntransition(to, from) {\nif (!from) return 'slide-left'\nreturn +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'\n},",
"description": "nuxt init head",
"scope": ""
},
"nuxt asyncData": {
"prefix": "QQ:nuxt-asyncData",
"body": "async asyncData({ query, env, store, route }) {\n let url = env.HOST_URL + `/api/data/blog`\n const blog = await axios.get(`${{url}`)\n return {\n dataNya: blog.data.data,\n }\n },",
"description": "nuxt asyncData",
"scope": ""
},
"VUE router.js": {
"prefix": "QQ:vue-path",
"body": "${1://redirect , children , $router.push('/), $route.params, $route.query}\n{path:'/$2',component:${3:namacomponent}, props:true }, ",
"description": "vue path default",
"scope": ""
},
"VUE store.js": {
"prefix": "QQ:vuex-store.js",
"body": "import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport const store = new Vuex.Store({\n state:{// adalah kumpulan data\n\n },\n getters:{// adalah kumpulan computed selalu memiliki parameter state doubleCounter(state){}\n\n },\n mutations:{// gunakan pada sync task selalu memiliki parameter state increment(state){}\n\n },\n actions:{// gunakan pada async task\n // increments({commit}){setTimeout((commit('increment');)=>{},1000)}\n\n },\n modules:{\n //counter << dari import { counter } from './modules/counter.js'\n }\n});\n",
"description": "vuex store.js default",
"scope": ""
},
"VUE Reserved attribute": {
"prefix": "QQ:vue-note-bind-reserve-attribute",
"body": "$1 RESERVER ATTRIBUTE \n v-bind: or : //membind isi dari attribute dengan data di vue instance\n v-on: or @ //membind isi dari attribute dengan data di vue instance\n v-if \n v-else-if \n v-else \n v-show // menghidden dengan css \n v-for // dapat mengulang array dan juga object , array = (data,index) , object = (data, keys, index)\n v-once // me render data 1x\n v-html // me render html string \n v-model // two ways data binding, menggunakan data parent / parent > child\n .prevent //menghentikan default event / preventDefault\n .capture //\n .self // akan men trigger event kalau event tersebut adalah element yang memiliki attribute ini\n .once //merender satu kali didalam element tanpa mengikuti perubahan data \n .passive // ...
the scroll event's default behavior (scrolling) will happen\n .native //dengan native maka akan menjadikan custom component bisa diklik walaupun di click dibagian dalam componen\n .lazy //digunakan pada form di v-model.lazy , v-model akan mengupdate data apabila focus ke element lain\n .number //digunakan pada form dan v-model.number , setiap input defaultnya adalah string, dengan property ini akan menjadikan number\n .trim //digunakan pada form di v-model.trim , akan menghilangkan white space\n //==================\n // INPUT MODIFIER \n //==================\n .enter //event akan di trigger saat enter di tekan\n .tab //event akan di trigger saat tab di tekan \n .delete (captures both “Delete” and “Backspace” keys) //event akan di trigger saat delete di tekan\n .esc \n .space\n .up\n .down\n .left\n .right\n //==================\n // SYSTEM MODIFIER\n //================== \n .ctrl //event akan ditrigger apabila ctrl di tekan , bisa digabung dengan input modifier dll agar menjadi combo\n .alt\n .shift\n .meta\n //==================\n // MOUSE MODIFIER\n //================== \n .left //event akan di trigger pada element yang di tekan left mouse memiliki attribute ini\n .right\n .middle\n //==================\n // CUSTOM MODIFIER\n //================== \n // enable `v-on:keyup.f1`\n Vue.config.keyCodes.f1 = 112\n //==============================\n // CUSTOM DIRECTIVES GLOBAL\n //==============================\n directives life cycle = \n > bind(el,binding,vnode) once directives is attached \n > inserted(el,binding,vnode) inserted in Parent node \n > update(el,binding,vnode,oldVnode) Once component is Updated(without children)\n > componentUpdate(el,binding,vnode,oldVnode) Once component is updated(with children)\n > unbind(el,binding,vnode) once directive removed\n Vue.directive('hightlight',{ //membuat directives di global \n bind(el,binding,vnode){\n el.style.backgroundColor = 'green';\n el.style.backgroundColor = binding.value;//binding value adalah value dari di notasion v-highlight=''red'' << akan menset secara dinamik bg-warna merah \n if(binding.arg == 'background'){ //arg adalah argument tambahan dari directives > v-highlight:background ,:background disana adalah .arg \n el.style.color = binding.value;\n }\n let delay = 0;\n if(binding.modifiers('delayed')){//modifiers sama halnya dengan @click.stop < stop disini adalah modifier \n delay=3000;\n }\n setTimeout(()=>{\n el.style.color = binding.value;\n },delay);\n //sehingga bisa diakses dengan cara v-highlight.delayed=''red'';\n //MULTIPLE MODIFIER tinggal tambah binding.modifier('nama modifier')\n //COMPLEX BINDING VALUE\n //v-highlight:background = '{mainColor:'red',secondColor:'blue'}';\n let mainColor = binding.value.mainColor;\n let secondColor = binding.value.secondColor;\n //FUNCTION BINDING VALUE \n //v-myOn:click = 'dipicik'; \n if(binding.modifier('click')){\n el.addEventListener(binding.arg,function(){\n binding.value(); // akan mengeksekusi methods yang ada di vue instance\n });\n }\n \n }\n });\n dengan menambahkan di element directive v-highlight akan mendapatkan background green\n //==============================\n // CUSTOM DIRECTIVES LOCAL\n //==============================\n export default{\n directives: {\n 'local-highlight':{\n bind(el,binging,vnode){\n \n }\n }\n }\n }",
"description": "vue event modifier",
"scope": ""
},
"VUE transition ": {
"prefix": "QQ:vue-transition/animation",
"body": "\n.$1-enter{\n opacity:0;\n}\n.$1-enter-active{\n transition:all 1s;\n}\n.$1-leave{\n opacity:1.0;\n}\n.$1-leave-active{\n transition:all 1s;\n opacity:0;\n}",
"description": "vue event modifier",
"scope": ""
},
"VUE lazy loading webpack": {
"prefix": "import-vue-lazy-loading",
"body": "const ${1:User} = resolve => {\n require.ensure(['${2:./components/User.vue}'], ()=>{\n resolve(require('${2:./components/User.vue}'));\n });\n}",
"description": "lazy loading",
"scope": ""
},
"VUE import map vuex": {
"prefix": "QQ:vuex-map",
"body": "import { mapState, mapMutations , mapGetters , mapActions} from 'vuex';",
"description": "vuex map",
"scope": ""
},
"VUEtouch": {
"prefix": "qq:vue-touch",
"body": "Swipe me! ",
"description": "vue-touch",
"scope": ""
},
"VUEtouchOption": {
"prefix": "qq:vue-touch-option",
"body": "\nhttps://www.npmjs.com/package/vue-touch-hotfix\nPan v-bind:pan-options\nPinch v-bind:pinch-options\nRotate v-bind:rotate-options\nSwipe v-bind:swipe-options\nTap v-bind:tap-options",
"description": "vue-touchoption",
"scope": ""
},
"Vue upload methods": {
"prefix": "qq:vue-upload-method",
"body": "uploadData(){\n let formdata = new FormData();\n let array = [];\n if(this.img.length>0){\n for(let i =0;i{console.log(res.data)});\n }",
"description": "vue-upload methods",
"scope": ""
},
"Vue json to excel": {
"prefix": "qq:vue-json-to-excell",
"body": "EXCEL ",
"description": "vue-json to excel",
"scope": ""
},
"NUXT workbox": {
"prefix": "QQ:nuxt-workbox/manifest",
"body": " workbox: {\n importScripts: [\n 'custom-sw.js' // taruh di static/custom-sw.jk\n ],\n runtimeCaching: [\n {\n urlPattern: \"https://3.bp.blogspot.com/*\",\n handler: 'cacheFirst',\n method: 'GET',\n strategyOptions: {\n cacheName: 'images',\n cacheableResponse: { statuses: [0, 200] }\n }\n }\n ]\n},\nmanifest: {\n name: 'TaufikAPP',\n lang: 'en-US',\n orientation:\"portrait-primary\",\n background_color:\"#fff\",\n display: \"fullscreen\",\n description: \"A simply readable Hacker News app.\"\n},",
"description": "vue componen",
"scope": ""
},
"NUXT Context param": {
"prefix": "QQ:nuxt-context-params",
"body": "//=============================\n// CONTEXT PARAMETER\n//=============================\n$1\nKEY TYPE AVAILABLE DESCRIPTION\napp Root Vue Instance Client & Server The root Vue instance that includes all your plugins. For example, when using axios, you can get access to $axios through context.app.$axios.\nprocess.client Boolean Client & Server Boolean to let you know if you're actually renderer from the client-side (deprecated. use process.client).\nprocess.server Boolean Client & Server Boolean to let you know if you're actually renderer from the server-side (deprecated. use process.server).\nisStatic Boolean Client & Server Boolean to let you know if you're actually inside a generated app (via nuxt generate).\nisDev Boolean Client & Server Boolean to let you know if you're in dev mode, can be useful for caching some data in production.\nisHMR Boolean Client & Server Boolean to let you know if the method/middleware is called from webpack hot module replacement (only on client-side in dev mode).\nroute Vue Router Route Client & Server Vue Router route instance.\nstore Vuex Store Client & Server Vuex Store instance. Available only if the vuex store is set.\nenv Object Client & Server Environment variables set in nuxt.config.js, see env api.\nparams Object Client & Server Alias of route.params.\nquery Object Client & Server Alias of route.query.\nreq http.Request Server Request from the Node.js server. If Nuxt is used as a middleware, the req object might be different depending of the framework you're using.\nNot available via nuxt generate.\nres http.Response Server Response from the Node.js server. If Nuxt is used as a middleware, the res object might be different depending of the framework you're using.\nNot available via nuxt generate.\nredirect Function Client & Server Use this method to redirect the user to another route, the status code is used on the server-side, default to 302. redirect([status,] path [, query]).\nerror Function Client & Server Use this method to show the error page: error(params). The params should have the properties statusCode and message.\nnuxtState Object Client Nuxt state, useful for plugins which uses beforeNuxtRender to get the nuxt state on client-side before hydration. Available only in universal mode.\nbeforeNuxtRender(fn) Function Server Use this method to update __NUXT__ variable rendered on client-side, the fn (can be asynchronous) is called with { Components, nuxtState }, see example.\n",
"description": "nuxt context",
"scope": ""
},
"NUXT auth conf": {
"prefix": "QQ:nuxt-auth-conf",
"body": " auth: {\n redirect: {\n login: '/login',\n logout: '/',\n callback: '/callback',\n user: '/' //home custom redirect apabila login success\n },\n strategies: {\n local: {\n endpoints: {\n login: { propertyName: 'token.accessToken' }\n }\n },\n auth0: {\n domain: 'nuxt-auth.auth0.com',\n client_id: 'q8lDHfBLJ-Fsziu7bf351OcYQAIe3UJv'\n },\n facebook: {\n client_id: '1671464192946675',\n userinfo_endpoint: 'https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email,birthday',\n scope: ['public_profile', 'email', 'user_birthday']\n },\n google: {\n client_id:\n '520945480172-18qjv9hjpho9pdpspv5lbsh2iakb943f.apps.googleusercontent.com'\n },\n github: {\n client_id: process.env.GITHUB_CLIENT_ID,\n client_secret: process.env.GITHUB_CLIENT_SECRET\n },\n twitter: {\n client_id: 'FAJNuxjMTicff6ciDKLiZ4t0D'\n }\n }\n },",
"description": "nuxt auth conf",
"scope": ""
},
"NUXT alert": {
"prefix": "QQ:nuxt-alert-auth",
"body": " {{ error + '' }} \n\nYou have to login before accessing to {{ $auth.$state.redirect }} \n ",
"description": "nuxt alert bootstrap",
"scope": ""
},
"NUXT api auth": {
"prefix": "QQ:nuxt-api-auth",
"body": "const express = require('express')\nconst bodyParser = require('body-parser')\nconst cookieParser = require('cookie-parser')\nconst jwt = require('express-jwt')\nconst jsonwebtoken = require('jsonwebtoken')\n\n// Create app\nconst app = express()\n\n// Install middleware\napp.use(cookieParser())\napp.use(bodyParser.json())\n\n// JWT middleware\napp.use(\n jwt({\n secret: 'dummy'\n }).unless({\n path: '/api/auth/login'\n })\n)\n\n// -- Routes --\n\n// [POST] /login\napp.post('/login', (req, res, next) => {\n const { username, password } = req.body\n const valid = username.length && password === '123'\n\n if (!valid) {\n throw new Error('Invalid username or password')\n }\n\n const accessToken = jsonwebtoken.sign(\n {\n username,\n picture: 'https://github.com/nuxt.png',\n name: 'User ' + username,\n scope: ['test', 'user']\n },\n 'dummy'\n )\n\n res.json({\n token: {\n accessToken\n }\n })\n})\n\n// [GET] /user\napp.get('/user', (req, res, next) => {\n res.json({ user: req.user })\n})\n\n// [POST] /logout\napp.post('/logout', (req, res, next) => {\n res.json({ status: 'OK' })\n})\n\n// Error handler\napp.use((err, req, res, next) => {\n console.error(err) // eslint-disable-line no-console\n res.status(401).send(err + '')\n})\n\n// -- export app --\nmodule.exports = {\n path: '/api/auth',\n handler: app\n}\n",
"description": "nuxt api auth",
"scope": ""
},
//tailwinds
"tailwinds text/font": {
"prefix": "QQ:tailwinds-text/font",
"body": "text-(color)\ntext-left|right|center|justify \nfont-(nama family)\nfont-xs|sm|md|lg|xl|2xl...\nitalic|roman|uppercase|lowercase|capitalize|normal-case|underline|line-through|no-underline|antialiased|subpixel-antialiased\nfont-hariline|thin|light|normal|medium|semibold|bold|extrabold|black \ntracking-tight|normal|wide (letter spacing)\nleading-none|tight|normal|loose (line Height)\nlist-reset\nalign-baseline|top|middle|bottom|text-top|text-bottom (vertical aligment)\nwhitespace-normal|no-wrap|pre|pre-line|pre-wrap\nbreak|words|normal \ntruncate \n",
"description": "tailwinds text font",
"scope": ""
},
"tailwinds button": {
"prefix": "QQ:tailwinds-button",
"body": "$2 ",
"description": "tailwinds button",
"scope": ""
},
"tailwinds select": {
"prefix": "QQ:tailwinds-select",
"body": " \n New Mexico \n Missouri \n Texas \n ",
"description": "tailwinds select",
"scope": ""
},
"tailwinds input-underline": {
"prefix": "QQ:tailwinds-input-underline",
"body": "\n \n Sign Up\n \n \n Cancel\n \n
",
"description": "tailwinds input-underline",
"scope": ""
},
"tailwinds card1": {
"prefix": "QQ:tailwinds-card1",
"body": "\n
\n
\n
The Coldest Sunset
\n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.\n
\n
\n
\n #photography \n #travel \n #winter \n
\n
\n
\n
\n
\n
\n
\n \n \n Members only\n
\n
Can coffee make you a better developer?
\n
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
\n
\n
\n
\n
\n
Jonathan Reinink
\n
Aug 18
\n
\n
\n
\n
\n \n ${1:username}\n \n
",
"description": "tailwinds input",
"scope": ""
},
"tailwinds container": {
"prefix": "QQ:tailwinds-container/layout",
"body": "",
"description": "tailwinds container",
"scope": ""
},
"tailwinds layout": {
"prefix": "QQ:tailwinds-display/float/overflow/scrolling/position/visible/hidden/z-index",
"body": "container \nblock|inline-block|inline|table|table-row|table-cell|hidden|flex|inline-flex (display)\nfloat-right|left|none \nclearfix \noverflow-auto|hidden|visible|scroll|x-auto|y-auto|x-hidden|y-hidden|x-visible\nscrolling-touch|auto \nstatic|fixed|absolute|relative|sticky|pin-t|pin-r|pin-b|pin-l|pin-y|pin-x|pin|pin-none (position)\nvisible|invisible \nz-0|10|20|30|40|50|auto \n",
"description": "tailwinds layout",
"scope": ""
},
"tailwinds background": {
"prefix": "QQ:tailwinds-background",
"body": "bg-fixed|bg-local|bg-scroll \nbg-(color|transparent|black|grey|etc)\nbg-bottom|center|left|left-bottom|left-top|right|right-top|top\nbg-repeat|no-repeat|repeat-x|repeat-y\nbg-auto|cover|contain \n",
"description": "tailwinds layout",
"scope": ""
},
"tailwinds border": {
"prefix": "QQ:tailwinds-border",
"body": "border-(color|transparent|blue|etc)\nborder-solid|dashed|dotted|none\nborder-1|2|4|8 (border all width)\nborder-t-1|2|4|8 (border top width)\nborder-r-1|2|4|8 (border top width)\nborder-l-1|2|4|8 (border top width)\nborder-b-1|2|4|8 (border top width)\nrounded-none|sm|lg|full|t-none|r-none|b-none|l-none\nrounded-tr|tl|br|bl-full|sm|lg\n",
"description": "tailwinds border",
"scope": ""
},
"tailwinds flex": {
"prefix": "QQ:tailwinds-flex",
"body": "flex flex-wrap mx-auto\n\nflex | inline-flex \nflex-row|flex-row-reverse|flex-col|flex-col-reverse \nflex-no-wrap|flex-wrap|flex-wrap-reverse \nitems-stretch|start|center|end|baseline \ncontent-start|center|end|between|around\nself-auto|start|center|end|stretch\njustify-start|center|end|between|around \nflex-initial|1|auto|none|grow|shrink|no-grow|no-shrink \n",
"description": "tailwinds flex",
"scope": ""
},
"tailwinds margin/padding": {
"prefix": "QQ:tailwinds-margin/padding",
"body": "margin = m \npadding = p \n- margin = -m \nm-l|r|t|b|x|y-1|2|3|4|5|6|8|10|12|16|20|24|32|(number)px|auto\n",
"description": "tailwinds margin/padding",
"scope": ""
},
"tailwinds height/width": {
"prefix": "QQ:tailwinds-height/width",
"body": "w-1|2|3|4|6|8|10|12|16|32|48|64|auto|px\nw-1/2|1/3|1/4|1/5|full|screen \nmin-w-0|full \nmax-w-xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|full \n\nh-1|2|3|4|6|8|10|12|16|32|48|64|auto|px\nh-1/2|1/3|1/4|1/5|full|screen \nmin-h-0|full \nmax-h-xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|full \n",
"description": "tailwinds height/width",
"scope": ""
},
"tailwinds curor/pointer": {
"prefix": "QQ:tailwinds-cursor|pointer|resize|shadow|box-shadow|opacity|outline",
"body": "cursor-auto|defaul|pointer|wait|move|not-allowed \npointer-events-none|auto \nresize-''|none|y|x \nselect-none|text \nappearance-none\nshadow-md|lg|inner|outline|none\nopacity-100|75|50|25|0\noutline-none \n\n\n",
"description": "tailwinds miscellaneous",
"scope": ""
},
"typicons icon": {
"prefix": "QQ:typicons-typicon",
"body": "show password \nshowPassword(e){\nif(this.$el.querySelector('#password').getAttribute('type')=='password'){\n this.$el.querySelector('#password').setAttribute('type','text')\n}else{\n this.$el.querySelector('#password').setAttribute('type','password')\n}\n}",
"description": "html show password",
"scope": ""
},
//exercise
"mine exercise ": {
"prefix": "QQ:exercise-myColorGame",
"body": "\n\n\n\n \n
\n
\n
\n
\n
TEBAK RGB BERIKUT \n \n RGB(\n 0 ,\n 0 ,\n 0 )\n \n \n \n
\n
\n
\n
\n
\n New Color? \n Hard \n Easy \n
\n
\n
\n
\n
test \n \n \n\n\n",
"description": "exercise1",
"scope": ""
},
"mine exercise2 ": {
"prefix": "QQ:exercise-myColorGame2",
"body": "\n\n\n\n start \n \n \n\n\n",
"description": "exercise1",
"scope": ""
},
// #FLUTTER
"flutter ": {
"prefix": "ff:flutter-!-materialApp",
"body": "import 'package:flutter/material.dart';\n// import 'package:intl/intl.dart';\n// import 'dart:async';\nimport './MQ.dart';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: '_title',\n theme:ThemeData(\n fontFamily:\"Roboto\",\n primarySwatch: Colors.blue\n ),\n home: MyHome());\n }\n}\n\nclass MyHome extends StatefulWidget {\n @override\n _MyHomeState createState() => _MyHomeState();\n}\n\nclass _MyHomeState extends State {\n var vdata={};// new Map.from(vdata); <- apabila mengambil vdata untuk memutus object reference\n @override\n Widget build(BuildContext context) {\n SizeConfig().init(context);\n return Scaffold(\n appBar: AppBar(title: Text('title bar'),),\n // ================ body\n body: Builder(builder: (context) => SafeArea(\n child: Stack(children:[\n // Positioned() disini \n ListView(children:[\n $1\n ])\n ]),\n )\n ),\n // drawer\n drawer: Drawer( // onPressed: () {Scaffold.of(context).openDrawer();}, // body harus pake Builder()\n child: Column(\n children: [\n Text(\"drawer\"),\n ],\n ),\n ),\n // floatingActionButtonLocation:FloatingActionButtonLocation.miniEndDocked,\n // floatingActionButton: Builder(\n // builder: (context) => FloatingActionButton(\n // child: Icon(Icons.add),\n // onPressed: () {},\n // ),\n // ),\n );\n }\n}",
"description": "flutter default material",
"scope": ""
},
"flutter main.dart route": {
"prefix": "ff:flutter-!-main-route",
"body": "import 'dart:io';\n\nimport './controller/initgeolocator.dart';\nimport 'package:flutter/services.dart';\n\nimport './pages/Index.dart';\nimport 'package:flutter/material.dart';\nimport 'package:get/get.dart';\nimport 'package:firebase_core/firebase_core.dart';\nimport 'package:cloud_firestore/cloud_firestore.dart';\nimport 'package:firebase_database/firebase_database.dart';\nimport 'package:firebase_messaging/firebase_messaging.dart';\nimport 'package:flutter_local_notifications/flutter_local_notifications.dart';\nimport './controller/initfcm.dart';\nimport './controller/StoreX.dart';\n// import 'package:intl/intl.dart';\n// import 'dart:async';\nimport 'package:hive/hive.dart';\nimport 'package:hive_flutter/hive_flutter.dart';\nimport 'package:path_provider/path_provider.dart' as path_d;\n\nFuture main() async {\n WidgetsFlutterBinding.ensureInitialized();\n SystemChrome.setPreferredOrientations([\n DeviceOrientation.portraitUp, // ganti menjadi landscape apabila ingin mem force landscape\n ]);\n // FCM\n await Firebase.initializeApp();\n FcmInit().initBackground(); // dari controller/initfcm\n // GEOLOCATOR\n GeolocatorInit().gpsPermission(); // dari controller/initgeolocator\n // HIVE\n Directory document= await path_d.getApplicationDocumentsDirectory();\n Hive.init(document.path);\n \n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n final StoreX storex =\n Get.put(StoreX()); \n @override\n Widget build(BuildContext context) {\n return GetMaterialApp(\n title: '_title',\n // theme: ThemeData(fontFamily: \"Roboto\", primarySwatch: Colors.blue),\n theme: storex.themes['type'] ? ThemeData(\n brightness: Brightness.light,\n ):ThemeData(fontFamily: \"Roboto\", primarySwatch: Colors.blue),\n darkTheme: storex.themes['type'] ? ThemeData(\n brightness: Brightness.dark,\n ):ThemeData(\n brightness: Brightness.light,\n ),\n themeMode: storex.themes['type'] ? ThemeMode.dark:ThemeMode.light, \n home: FcmHandler(), // buat IndexPage di ./page/Index.dart,\n );\n }\n}\n\n// FCM \nclass FcmHandler extends StatefulWidget {\n FcmHandler({Key key}) : super(key: key);\n\n @override\n _FcmHandlerState createState() => _FcmHandlerState();\n}\n\nclass _FcmHandlerState extends State {\nFirebaseMessaging messaging = FirebaseMessaging.instance;\n @override\n void initState(){\n super.initState();\n FcmInit().init(); // dari controller/fcminit\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: SafeArea(child: IndexPage()),\n );\n }\n}\n",
"description": "flutter main route",
"scope": ""
},
"flutter indexPage.dart route": {
"prefix": "ff:flutter-!-indexpage-route",
"body": "import '../controller/StoreX.dart';\nimport 'package:flutter/material.dart';\nimport 'package:get/get.dart';\n// import 'package:http/http.dart' as http;\n// import 'package:intl/intl.dart';\n// import 'dart:async';\n\nimport '../plugins/autophp.dart';\nvar sdb = new autophp();\n\nclass ${1:IndexPage} extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n final StoreX storex = Get.put(StoreX()); // buat file ./controller/StoreX.dart\n var vdata ={}; // new Map.from(vdata); <- apabila mengambil vdata untuk memutus object reference\n return Scaffold(\n appBar: AppBar(\n title: Text('${1:IndexPage}'),\n ),\n // ================ body\n body: Builder(\n builder: (context) => Stack(children: [\n // Positioned() disini\n ListView(children: [\n \n ])\n ]),\n ),\n // drawer\n drawer: Theme(\n data: Theme.of(context).copyWith(\n // Set the transparency here\n canvasColor: Colors.transparent, //or any other color you want. e.g Colors.blue.withOpacity(0.5)\n ), \n child: Container(\n width:Get.width*0.3,\n color: Colors.black.withOpacity(0.2),\n child: Drawer(\n // onPressed: () {Scaffold.of(context).openDrawer();}, // body harus pake Builder()\n child: Container(\n color: Colors.black.withOpacity(0.2),\n child: Text('test')\n ),\n ),\n ),\n ),\n // floatingActionButton: FloatingActionButton(onPressed: (){}, child: Icon(Icons.add),),\n // floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,\n // bottomNavigationBar: BottomBar1(), // import dari Components BottomBar\n );\n }\n}\n\n",
"description": "flutter index page route",
"scope": ""
},
"flutter Text widget standard": {
"prefix": "ff:text-widget",
"body": "Text(\n \"Hi\",\n textAlign: TextAlign.center,\n ${1:style: TextStyle(\n fontSize: 30.0,\n color: Colors.blue,\n fontFamily: \"Caveat\",\n letterSpacing: 20.0,\n wordSpacing: 100.0,\n fontWeight: FontWeight.bold, // bold\n decoration: TextDecoration.underline, // underline\n fontStyle: FontStyle.italic, // italic\n backgroundColor: Colors.black,\n shadows: [\n Shadow(\n blurRadius: 10.0,\n color: Colors.blue,\n offset: Offset(5.0, 5.0),\n ),\n ],\n ),}\n),",
"description": "flutter text widget",
"scope": ""
},
"flutter selectable Text widget standard": {
"prefix": "ff:selectable-text-widget",
"body": "SelectableText(\n'Hello! How are you?',\n${1:textAlign: TextAlign.center,\n style: TextStyle(\n fontSize: 30.0,\n color: Colors.blue,\n fontFamily: \"Caveat\",\n letterSpacing: 20.0,\n wordSpacing: 100.0,\n fontWeight: FontWeight.bold, // bold\n decoration: TextDecoration.underline, // underline\n fontStyle: FontStyle.italic, // italic\n backgroundColor: Colors.black,\n shadows: [\n Shadow(\n blurRadius: 10.0,\n color: Colors.blue,\n offset: Offset(5.0, 5.0),\n ),\n ],\n ),\n }\n),",
"description": "flutter selectable text widget",
"scope": ""
},
"flutter Text widget rich": {
"prefix": "ff:text-rich-widget",
"body": "Text.rich(\n TextSpan(\n text: 'Hello', // default text style\n children: [\n TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),\n TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),\n ],\n textAlign: TextAlign.center,\n style: TextStyle(color:Colors.blue),\n ),\n)\n",
"description": "flutter text rich widget",
"scope": ""
},
"flutter Gesture widget": {
"prefix": "ff:gesture-touch-click-widget",
"body": "GestureDetector(\n onTap: () { // on doubletap, drag\n setState(() {\n _lights = true;\n });\n },\n child: Container(\n color: Colors.yellow.shade600,\n padding: const EdgeInsets.all(8),\n child: const Text('TURN LIGHTS ON'),\n ),\n),",
"description": "flutter gesture widget",
"scope": ""
},
"flutter Row widget": {
"prefix": "ff:row-widget-layout",
"body": "Row(\n mainAxisAlignment: MainAxisAlignment.center,\n crossAxisAlignment: CrossAxisAlignment.center,\n children: [\n ${1:\n Flexible(\n flex:1, // ini akan menjadi ukuran dengan widget flex lain\n fit: FlexFit.tight,\n child: $1\n ),\n Expanded(\n flex:1,// ini akan menjadi ukuran dengan widget flex lain\n child: ,\n )}\n ],\n),",
"description": "flutter row widget",
"scope": ""
},
"flutter Column widget": {
"prefix": "ff:column-widget-layout",
"body": "Column(\n mainAxisAlignment: MainAxisAlignment.center,\n crossAxisAlignment: CrossAxisAlignment.center,\n children: [\n ${1:\n Flexible(\n flex:1, // ini akan menjadi ukuran dengan widget flex lain\n // fit: FlexFit.tight,\n child: \n ),\n Expanded(\n flex:1,// ini akan menjadi ukuran dengan widget flex lain\n child: ,\n )}\n ],\n),\n",
"description": "flutter Column widget",
"scope": ""
},
"flutter grid widget2": {
"prefix": "ff:grid-count-builder-layout-overflow-scrollable",
"body": " Container(\n height: MediaQuery.of(context).size.height,// tinggi nya sebanyak yang tersedia\n child: GridView.count(\n primary: false,\n childAspectRatio: 3/2,//lebar dan tinggi children\n crossAxisCount: 4, // jumlah item per row\n padding: const EdgeInsets.all(5),\n crossAxisSpacing: 5,\n mainAxisSpacing: 5,\n children: [\n \n ],\n ),\n),",
"description": "flutter grid item widget",
"scope": ""
},
"flutter grid widget": {
"prefix": "ff:grid-default-layout-overflow-scrollable",
"body": "Container(\n height: MediaQuery.of(context).size.height,// tinggi nya sebanyak yang tersedia\n child: GridView(\n children: [],\n gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(\n maxCrossAxisExtent: 200, // width\n childAspectRatio: 3/2, //lebar dan tinggi children\n crossAxisSpacing: 20,\n mainAxisSpacing: 20\n )\n ),\n),",
"description": "flutter grid default item widget",
"scope": ""
},
"flutter page navigator widget": {
"prefix": "ff:page-navigator-route-manual",
"body": "Navigator.of(context).push(\n MaterialPageRoute(\n builder: (_) {\n return ${1:DetailInfo()};\n },\n ),\n );",
"description": "flutter page navigator",
"scope": ""
},
"flutter page navigation widget": {
"prefix": "ff:push-navigation-route-manual",
"body": "Navigator.of(context).pushNamed('${1:/detail}',arguments: {'id':1});",
"description": "flutter push navigation ",
"scope": ""
},
"flutter pop navigation widget": {
"prefix": "ff:pop-back-navigation-route-manual",
"body": "Navigator.pop(context);",
"description": "flutter pop back navigation ",
"scope": ""
},
"flutter Wrap widget": {
"prefix": "ff:wrap-row-widget-layout-overflow",
"body": "Wrap( // berfungsi untuk menjadikan content responsive, sudah terpopulate maka akan ditambahkan ke next aligment\n // verticalDirection: VerticalDirection.down, // up/down\n children: [],\n),",
"description": "flutter wrap widget berfungsi untuk menjadikan content responsive",
"scope": ""
},
"flutter elevation button widget": {
"prefix": "ff:button-elevation-widget",
"body": "ElevatedButton(\n style: ElevatedButton.styleFrom(\n onPrimary: Colors.black87,\n elevation: 5,\n primary: Colors.blue[300],\n padding: EdgeInsets.symmetric(horizontal: 16),\n shape: const RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(2)),\n ),\n ),\n onPressed: () {},\n child: Text('${1:Click}'),\n),",
"description": "flutter elevation button widget",
"scope": ""
},
"flutter outline button widget": {
"prefix": "ff:button-outline-widget",
"body": "OutlinedButton(\n style: OutlinedButton.styleFrom(\n primary: Colors.blue,\n padding: EdgeInsets.symmetric(horizontal: 16),\n shape: const RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(2)),\n ),\n // shape: StadiumBorder(), // radius\n side: BorderSide( //border\n width: 2,\n color: Colors.red\n ),\n ),\n onPressed: () {},\n child: Text('${1:Click}'),\n),",
"description": "flutter outline button widget",
"scope": ""
},
"flutter perulangan map widget": {
"prefix": "ff:perulangan-map-iteration-widget",
"body": "children:[\n ...(titles.map((e)=>Text('test'))).toList(),\n]\nchildren: titles.map((e)=>Text('test')).toList(),",
"description": "flutter map",
"scope": ""
},
"flutter padding margin property widget": {
"prefix": "ff:padding-margin-property",
"body": "padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15), //EdgeInsets.all(10), EdgeInsets.only(right: 10)",
"description": "flutter padding margin",
"scope": ""
},
"flutter border radius property widget": {
"prefix": "ff:border-radius-property",
"body": "borderRadius: BorderRadius.circular(12), // BorderRadius -> .circular(12),all(10),only(topRight:Radius.circular(10)), vertical,horizontal",
"description": "flutter border radius",
"scope": ""
},
"flutter border widget": {
"prefix": "ff:border-property",
"body": "border: Border.all(color: Colors.blue,width: 2), // .symmetric(horizontal: BorderSide(color: Colors.blue,width:2),vertical: BorderSide(color: Colors.blue,width:2))",
"description": "flutter border radius",
"scope": ""
},
"flutter box-shadow widget": {
"prefix": "ff:border-shadow-property",
"body": "boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.5),spreadRadius: 5,blurRadius: 7,offset: Offset(0, 3)], // pffset changes position of shadow),",
"description": "flutter box-shadow property",
"scope": ""
},
"flutter image decoration property widget": {
"prefix": "ff:image-decoration-property",
"body": "image: const DecorationImage(image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),//AssetsImage('./')\nfit: BoxFit.cover,),",
"description": "flutter image decoration property",
"scope": ""
},
"flutter image widget": {
"prefix": "ff:image-widget",
"body": "Image( //width,height\n image: AssetImage('assets/images/dash.jpg'), // NetworkImage(url), AssetImage()\n fit: BoxFit.cover,//fill,cover , etc\n),\nImage.network('url',fit: BoxFit.fill,\n loadingBuilder:(BuildContext context, Widget child,ImageChunkEvent loadingProgress) {\n if (loadingProgress == null) return child;\n return Center(\n child: CircularProgressIndicator(\n value: loadingProgress.expectedTotalBytes != null ? \n loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes\n : null,\n ),\n );\n },\n),",
"description": "flutter image widget",
"scope": ""
},
"flutter icon widget": {
"prefix": "ff:icon-widget",
"body": "Icon( //https://fonts.google.com/icons?selected=Material+Icons\n Icons.audiotrack,\n color: Colors.green,\n size: 30.0,\n),",
"description": "flutter icon widget",
"scope": ""
},
"flutter container ! widget": {
"prefix": "ff:container-!-widget-property",
"body": "Container(\n padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15), //EdgeInsets.all(10), EdgeInsets.only(right: 10)\n margin: EdgeInsets.only(right: 10),\n child: Text('text'),\n ${1:\n decoration: BoxDecoration(\n color: Colors.blue,\n image: const DecorationImage(\n image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'), //AssetsImage('./')\n fit: BoxFit.cover,\n ),\n border: Border.all(color: Colors.blue,width: 2), // .symmetric(horizontal: BorderSide(color: Colors.blue,width:2),vertical: BorderSide(color: Colors.blue,width:2))\n boxShadow: [\n BoxShadow(\n color: Colors.grey.withOpacity(0.5),\n spreadRadius: 5,\n blurRadius: 7,\n offset: Offset(0, 3), // changes position of shadow\n ),\n ],\n borderRadius: BorderRadius.circular(12), // BorderRadius -> .circular(12),all(10),only(topRight:10), vertical,horizontal\n ),}\n),",
"description": "flutter container widget property",
"scope": ""
},
"flutter expanded overflow widget": {
"prefix": "ff:expanded-overflow-widget",
"body": " Expanded(//contoh 1, note expanded bisa sebagai container widget lain\n child: Text('Craft beautiful UIs', textAlign: TextAlign.center),\n ),\n Expanded(//contoh 2\n child: FittedBox(\n fit: BoxFit.contain, // otherwise the logo will be tiny\n child: const FlutterLogo(),\n ),\n ),",
"description": "flutter expanded overflow widget",
"scope": ""
},
"flutter flexible widget": {
"prefix": "ff:flexible-widget",
"body": "Flexible(\n flex:1, // ini akan menjadi ukuran dengan widget flex lain\n fit: FlexFit.tight,\n child: $1\n),",
"description": "flutter flexible widget",
"scope": ""
},
"flutter safearea widget": {
"prefix": "ff:safearea-widget",
"body": "SafeArea( // berfungsi untuk menjadikan fit dengan curve variasi handphone, body : SafeArea()\n child: $1\n), ",
"description": "flutter safearea widget",
"scope": ""
},
"flutter opacity widget": {
"prefix": "ff:opacity-widget",
"body": "Opacity(\n opacity: 0.5,\n child:$1\n),",
"description": "flutter opactiy widget",
"scope": ""
},
"flutter pageView widget": {
"prefix": "ff:pageview-carousel-geser-kiri-kanan-page-widget",
"body": "class MyStatelessWidget extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n final PageController controller = PageController(initialPage: 0);\n // ganti page dengan button -> controller.animateToPage(0,duration: const Duration(milliseconds: 400),curve: Curves.easeInOut);\n return PageView(\n scrollDirection: Axis.horizontal, // horizontal, vertical\n controller: controller,\n children: const [\n Center(\n child: Text('First Page'),\n ),\n Center(\n child: Text('Second Page'),\n ),\n Center(\n child: Text('Third Page'),\n )\n ],\n );\n }\n}",
"description": "flutter pageview multipage geser kiri kana widget",
"scope": ""
},
"flutter listview widget": {
"prefix": "ff:listview-overflow-widget-layout-scrollbar",
"body": " ListView( //UNTUK MENAMBAHKAN SCROLLBAR BUNGKUS ListView dengan ScrollBar() widget\n addAutomaticKeepAlives: false,\n scrollDirection: Axis.horizontal, // vertical\n children: [\n \n ],\n),\nListView.builder( //ListViewBuilder hanya merender sebanyak itemcount\n addAutomaticKeepAlives: false,\n // scrollDirection: Axis.horizontal,\n itemCount: [1,2,3,4].length,\n itemBuilder: (context, i) {\n return Text('test');\n },\n),",
"description": "flutter listview overflow widget",
"scope": ""
},
"flutter data table widget": {
"prefix": "ff:table-datatable-widget",
"body": "ListView(children: [ \n Center( \n child: Text( \n 'People-Chart', \n style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold), \n )), \n DataTable( \n columns: [ \n DataColumn(label: Text( \n 'ID', \n style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold) \n )), \n DataColumn(label: Text( \n 'Name', \n style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold) \n )), \n ], \n rows: [ \n DataRow(cells: [ \n DataCell(Text('1')), \n DataCell(Text('Stephen')), \n ]), \n DataRow(cells: [ \n DataCell(Text('5')), \n DataCell(Text('John')), \n ]), \n ], \n ), \n]) ",
"description": "flutter data table widget",
"scope": ""
},
"flutter data table !": {
"prefix": "ff:table-datatable-!-widget",
"body": "import 'package:flutter/material.dart';\nimport 'dart:math';\n\nvoid main() {\n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n debugShowCheckedModeBanner: false,\n title: 'Kindacode.com',\n home: HomePage(),\n );\n }\n}\n\nclass HomePage extends StatefulWidget {\n @override\n _HomePageState createState() => _HomePageState();\n}\n\nclass _HomePageState extends State {\n // Generate a list of fiction prodcts\n final List _products = List.generate(30, (i) {\n return {\"id\": i, \"name\": \"Product $i\", \"price\": Random().nextInt(200) + 1};\n });\n\n int _currentSortColumn = 0;\n bool _isAscending = true;\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('Kindacode.com'),\n ),\n body: Container(\n width: double.infinity,\n child: SingleChildScrollView(\n child: DataTable(\n sortColumnIndex: _currentSortColumn,\n sortAscending: _isAscending,\n headingRowColor: MaterialStateProperty.all(Colors.amber[200]),\n columns: [\n DataColumn(label: Text('Id')),\n DataColumn(label: Text('Name')),\n DataColumn(\n label: Text(\n 'Price',\n style: TextStyle(\n color: Colors.blue, fontWeight: FontWeight.bold),\n ),\n // Sorting function\n onSort: (columnIndex, _) {\n setState(() {\n _currentSortColumn = columnIndex;\n if (_isAscending == true) {\n _isAscending = false;\n // sort the product list in Ascending, order by Price\n _products.sort((productA, productB) =>\n productB['price'].compareTo(productA['price']));\n } else {\n _isAscending = true;\n // sort the product list in Descending, order by Price\n _products.sort((productA, productB) =>\n productA['price'].compareTo(productB['price']));\n }\n });\n }),\n ],\n rows: _products.map((item) {\n return DataRow(cells: [\n DataCell(Text(item['id'].toString())),\n DataCell(Text(item['name'])),\n DataCell(Text(item['price'].toString()))\n ]);\n }).toList(),\n ),\n ),\n ));\n }\n}",
"description": "flutter data table ! widget",
"scope": ""
},
"flutter decoration property widget": {
"prefix": "ff:decoration-property",
"body": "decoration: BoxDecoration(\n color: Colors.blue,\n image: const DecorationImage(\n image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'), //AssetsImage('./')\n fit: BoxFit.cover,\n ),\n border: Border.all(color: Colors.blue,width: 2), // .symmetric(horizontal: BorderSide(color: Colors.blue,width:2),vertical: BorderSide(color: Colors.blue,width:2))\n boxShadow: [\n BoxShadow(\n color: Colors.grey.withOpacity(0.5),\n spreadRadius: 5,\n blurRadius: 7,\n offset: Offset(0, 3), // changes position of shadow\n ),\n ],\n borderRadius: BorderRadius.circular(12), // BorderRadius -> .circular(12),all(10),only(topRight:10), vertical,horizontal\n),",
"description": "flutter decoration property",
"scope": ""
},
"flutter list tile widget": {
"prefix": "ff:list-tile-widget-button-list-ready-3-row",
"body": "ListTile(\n leading: Icon(Icons.ac_unit),\n title: Text(\"Widget of the week\"),\n subtitle: Text('#date + content'),\n isThreeLine: true,\n dense: true,\n onTap: ()=>{},//onlongpress\n trailing: Icon(Icons.ac_unit),\n),",
"description": "flutter list tile widget",
"scope": ""
},
"flutter tooltip widget": {
"prefix": "ff:tooltip-widget",
"body": "Tooltip(\n message: 'text',\n child: $1,\n),",
"description": "flutter tooltip widget",
"scope": ""
},
"flutter fitbox fit widget": {
"prefix": "ff:fitbox-fit-widget",
"body": "FittedBox(\n fit: BoxFit.contain,//fill,cover,etc\n child: $1,\n),",
"description": "flutter fitbox fit widget",
"scope": ""
},
"flutter positioned widget": {
"prefix": "ff:positioned-absolute-widget",
"body": "Positioned(\n top: 10,\n right: 10,\n left: 10,\n bottom: 10,\n child: $1\n),",
"description": "flutter position-absolute widget",
"scope": ""
},
"flutter stack widget": {
"prefix": "ff:stack-position-absolute-widget",
"body": "Stack(\n overflow: Overflow.clip,\n children: [\n Positioned(\n top: 10,right: 10,left: 10,bottom: 10,\n child: $1,\n ),\n ],\n),",
"description": "flutter stack-position-absolute widget",
"scope": ""
},
"flutter slide widget": {
"prefix": "ff:slider-widget",
"body": "Slider(\n value:rating, // define var rating dlu\n onChanged: (newRating){\n setState(()=>{\n rating = newRating;\n });\n },\n divisions: 4,\n label:'$$rating',\n),",
"description": "flutter slider widget",
"scope": ""
},
"flutter alertdialog widget": {
"prefix": "ff:alertdialog-confirm-widget",
"body": "AlertDialog(\n title: Text('AlertDialog Title'),\n content: SingleChildScrollView(\n child: ListBody(\n children: [\n Text('This is a demo alert dialog.'),\n Text('Would you like to approve of this message?'),\n ],\n ),\n ),\n actions: [\n TextButton(\n child: Text('Approve'),\n onPressed: () {\n },\n ),\n ],\n),",
"description": "flutter alertdialog/confirm widget",
"scope": ""
},
"flutter tabview widget": {
"prefix": "ff:tabview-widget",
"body": "return MaterialApp(\n home: DefaultTabController(\n length: 3,\n child: Scaffold(\n appBar: AppBar(\n bottom: TabBar(\n tabs: [\n Tab(icon: Icon(Icons.directions_car)),\n Tab(icon: Icon(Icons.directions_transit)),\n Tab(icon: Icon(Icons.directions_bike)),\n ],\n ),\n title: Text('Tabs Demo'),\n ),\n body: TabBarView(\n children: [\n Icon(Icons.directions_car),\n Icon(Icons.directions_transit),\n Icon(Icons.directions_bike),\n ],\n ),\n ),\n ),\n);",
"description": "flutter tabview widget",
"scope": ""
},
"flutter body builder widget": {
"prefix": "ff:body-builder-widget",
"body": "body: Builder(\n builder: (context) => \n $1\n ),\n),",
"description": "flutter body builder widget",
"scope": ""
},
"flutter drawer widget": {
"prefix": "ff:drawer-widget",
"body": "drawer: Drawer( // taruh di Scaffold\n child: Column(\n children: [\n Text(\"PRINT 1\"),\n ],\n ),\n),\n// onPressed: () {Scaffold.of(context).openDrawer();}, // body harus pake Builder()",
"description": "flutter drawer widget",
"scope": ""
},
"flutter dividier widget": {
"prefix": "ff:divider-hr-garis-widget",
"body": "Divider(\n height: 3,\n thickness: 1,\n color: Colors.grey,\n indent: 0,\n endIndent: 0,\n),",
"description": "flutter divider hr widget",
"scope": ""
},
"flutter form checkbox widget": {
"prefix": "ff:form-checkbox-widget",
"body": "CheckboxListTile(\n title: Text('pilihan 1'),\n secondary: Icon(Icons.access_alarm),\n activeColor: Colors.green,\n checkColor: Colors.black,\n value: pilih, // pilih deklarasi dlu di variable pilih\n onChanged: (bool value){\n setState(){\n pilih=value;\n };\n }\n),",
"description": "flutter form checkbox widget",
"scope": ""
},
"flutter form selection widget": {
"prefix": "ff:form-selection-widget",
"body": "String dropdownValue = 'One';\nDropdownButton(\n value: dropdownValue,\n iconSize: 24,\n elevation: 16,\n style: const TextStyle(\n color: Colors.deepPurple),\n underline: Container(\n height: 2,\n color: Colors.deepPurpleAccent,\n ),\n onChanged: (String? newValue) {\n setState(() {\n dropdownValue = newValue!;\n });\n },\n items: ['One','Two','Free','Four'].map>(\n (String value) {\n return DropdownMenuItem(\n value: value,\n child: Text(value),\n );\n }).toList(),\n)",
"description": "flutter form selection widget",
"scope": ""
},
"flutter form switch widget": {
"prefix": "ff:form-switch-widget",
"body": "SwitchListTile(\n title: Text('pilihan 1'),\n secondary: Icon(Icons.access_alarm),\n value: pilih, // pilih deklarasi dlu di variable pilih\n onChanged: (bool value){\n setState(){\n pilih=value;\n };\n }\n),",
"description": "flutter form switch widget",
"scope": ""
},
"flutter form input/textfield widget": {
"prefix": "ff:form-input-default-textfield-widget",
"body": "TextField(\n decoration: InputDecoration(\n labelText: '${1:Username}',\n // border: OutlineInputBorder(),\n// keyboardType:TextInputType.number,\n ),\n onChanged: (val)=>vdata['${1:username}']=val,\n),",
"description": "flutter form input textfield widget",
"scope": ""
},
"flutter form input/textformfield widget": {
"prefix": "ff:form-input2-textformfield-widget",
"body": "TextFormField(\n decoration: const InputDecoration(\n icon: Icon(Icons.person),\n labelText: 'Username', \n hintText: 'What do people call you?', // placeholder\n// keyboardType:TextInputType.number,\n helperText: 'Helper Text', // text dibawah kiri\n counterText: '0 characters', // text dibawah kanan\n ),\n // obscureText: true,// apabila password\n onChanged: (val)=>vdata['Username']=val, // pilih salah satu\n validator: (value) {\n return (value != null &&\n value.contains('@'))\n ? 'Do not use the @ char.'\n : null;\n },\n),",
"description": "flutter form input textformfield widget",
"scope": ""
},
"flutter form radio widget": {
"prefix": "ff:form-radio-widget",
"body": "// var pilih; buat variable pilih dulu\nRadioListTile(\n title: Text('pilih 1'),\n value: 'kino',\n groupValue: pilih,\n onChanged: (value) {\n setState(() {\n pilih=value;\n });\n },\n),\nRadioListTile(\n title: Text('pilih 2'),\n value: 'hermes',\n groupValue: pilih,\n onChanged: (value) {\n setState(() {\n pilih=value;\n });\n },\n),",
"description": "flutter form radio widget",
"scope": ""
},
"flutter align widget": {
"prefix": "ff:align-widget",
"body": "Align(\n alignment: Alignment.topRight,\n child: $1,\n),",
"description": "flutter align widget",
"scope": ""
},
"flutter gesture click widget": {
"prefix": "ff:gesturedetector-click-klik-widget",
"body": "GestureDetector(\n child: $1,\n onTap: (){},\n),",
"description": "flutter gesturedetector klik widget",
"scope": ""
},
"flutter modal bottom widget": {
"prefix": "ff:modal-bottom-widget",
"body": "showModalBottomSheet( //trigger saat event click, harus berada didalam Builder( builder: (context) => ) untuk mengambil context\n context: context,\n builder: (BuildContext context) {\n return Container(height:300,child: \n Text('test')\n );\n// trigger Navigator.pop(context) ini untuk close modal didalam modal \n});",
"description": "flutter modal bottom widget",
"scope": ""
},
"flutter floating button widget": {
"prefix": "ff:floating-button-widget",
"body": "floatingActionButtonLocation:\n FloatingActionButtonLocation.miniEndDocked,\nfloatingActionButton: Builder(\n builder: (context) => FloatingActionButton(\n child: Icon(Icons.add),\n onPressed: () {},\n ),\n),",
"description": "flutter floating button widget",
"scope": ""
},
"flutter array method": {
"prefix": "ff:array-list-method-note",
"body": "// LIST / ARRAY METHODS\nList arr=[];\narr=List.generate(7, (index) => null); // melakukan initial List dengan cara generate\narr.add(1); //push\narr.removeLast(); // pop\narr.removeAt(1); // remote at index, arr.removeRange(0,3); index 0-3\narr.reversed; // order reverse list\nList newArr = [...arr1,...arr2]; //combine\nList iterate = [{'name':'kino'},{'name':'hermes'},{'name':'malik'}];\niterate.indexWhere((e) => e['name']=='hermes'); // indexof return index\niterate.where((e)=>e['name']=='hermes'); // filter \narr.contains('c1'); //contain true/false\niterate.map((val) { return {'username':val};}).toList(); // map\n[1,2,3,4,5].fold(5, (val1, val2) => i + j); // REDUCE ,<= 20 akan menambahakan val1,val2 dengan 5(sebagai initial value);\niterate.asMap(); // return list menjadi list of object\niterate.asMap().forEach((i, val){}); // iterate dengan index, value. note: asMap() digunakan apabila bentuk list ['a','b','c'];\n// MAPPING KE NEW OBJECT DARI ARRAY \nvar myList = ['zero', 'one', 'two', 'three', 'four', 'five'];\nvar uppers = myList.map((val) {\n return {\n 'username':val\n };\n}).toList();// setiap map method pastikan .toList()\n//! atau dengan cara forEach\nvar baru=[];\nmyList.asMap().forEach((i, val) => {\n if(myList[i]=='a'){\n baru.add({'name':val}); \n }\n}); // akan mereturn dalam bentuk list of object \n",
"description": "flutter array method",
"scope": ""
},
"flutter object method": {
"prefix": "ff:object-map-method-note",
"body": "// MAP / OBJECT METHOD\nvar details = {'Usrname':'tom','Password':'pass@123'}; \nprint(details.keys); // menghasilkan list of key \nvar hosts = {}; \nprint(hosts.isEmpty); // check if object empty\nuser.containsKey('lastname');//true , cek apakah ada key\nuser.containsValue('Tom');//true, cek apakah ada value\nuser.forEach((key,value){});// \n// MERGING SAME KEY\nvar user = {\"firstName\": \"Tom\",\"age\": 25}; \nuser.addAll({\"lastName\": \"Smith\",\"age\": 26});\nprint(user); // => {\"firstName\": \"Tom\", \"age\": 26, \"lastName\": \"Smith\"}\nuser.putIfAbsent(\"accessToken\", () => \"abf329jklr90rnlk2...\"); // apabila key accessToken sudah ada maka update value, apabila tidak ada maka lakukan add key dan value baru\n",
"description": "flutter object method",
"scope": ""
},
"flutter string method": {
"prefix": "ff:string-method-note",
"body": "// STRING METHOD \nvar string = \"Hello world!\";\nstring.toString();\nstring.toStringAsFixed(2); //convert menjadi string akan tetapi dibatasi sebanyak 2 angka setelah koma/titik\nstring.substring(1, 4); // potong dari end -> start;\nstring.toUpperCase();// ganti menjadi huruf besar untuk menjadikan satuan value lebih dari lowercase() ;\nstring.toLowerCase();//ganti menjadi huruf kecil\nstring.split(\" \"); //['hello','world']\nstring.join(','); // hello,world\nemail.replaceAll(RegExp(r'(?<=.{1}).(?=.*@)'), '*');//replace",
"description": "flutter string method",
"scope": ""
},
"flutter number method": {
"prefix": "ff:number-method-note",
"body": "// NUMBER METHOD \nabs() It gives the absolute value of the given number.\nceil() It gives the ceiling value of the given number.\nfloor() It gives the floor value of the given number.\ncompareTo() It compares the value with other number.\nremainder() It gives the truncated remainder after dividing the two numbers.\nround() It returns the round of the number.\ntoDouble() It gives the double equivalent representation of the number.\ntoInt() Returns the integer equivalent representation of the number.\ntoString() Returns the String equivalent representation of the number\ntruncate() Returns the integer after discarding fraction digits.\ndouble.parse();",
"description": "flutter number method",
"scope": ""
},
"flutter convertion type method": {
"prefix": "ff:convertion-type-reference-method-note",
"body": "// CONVERTION METHOD\nvar string = \"Hello world!\";\nstring.split(\" \"); //['hello','world']\nstring.join(','); // hello,world\narr.asMap(); // return list/array menjadi list of object\ndouble.parse(val);// mengconvert menjadi double \nvar vdata={};\nvar newVdata = new Map.from(vdata); // untuk memutus object reference \nvar newVdata = json.decode(json.encode(vdata)); //untuk memutus object referece \n// JSON CONVERTION\nimport 'dart:convert';\nfinal myJsonAsString = '{\"a\": 1, \"b\": \"c\"}';\nfinal decoded = json.decode(myJsonAsString);\nfinal encode = json.encode(decode);\n",
"description": "flutter convertion method",
"scope": ""
},
"flutter try error method": {
"prefix": "ff:try-error-catch-test-method-note",
"body": "// Execection \ntry { \n res = x ~/ y; \n} \ncatch(e) { \n print(e); \n} \n",
"description": "flutter try error catch method",
"scope": ""
},
"flutter datetime method": {
"prefix": "ff:datetime-method-note",
"body": "// Date method \nimport 'package:intl/intl.dart';\nDateTime.now();\nDateFormat('yyyy-MM-dd').format(DateTime.now());\nDateTime.now().subtract(Duration(days:7);// mendapatkan tanggal 7 hari sebelumnya\n",
"description": "flutter datetime method",
"scope": ""
},
"flutter datetimepicker method": {
"prefix": "ff:form-datetimepicker-widget",
"body": "showDatePicker(\n context: context, initialDate: DateTime.now(), \n firstDate: DateTime(2015, 8),\n lastDate: DateTime(2101)\n).then((value){\n if (value != null)\n setState(() {\n vdata['tanggal']=value;\n });\n});",
"description": "flutter date time picker widget",
"scope": ""
},
"flutter mediaquery method": {
"prefix": "ff:mediaquery-viewport-vw/vh-size-style",
"body": "// Cara dibawah ini sama dengan viewport di css vw, dan vh\nMediaQuery.of(context).size.height * 0.5, // artinya tinggi 50% dari tinggi device yang tersedia \nMediaQuery.of(context).size.width * 0.5, // artinya tinggi 50% dari lebar device yang tersedia \n// contoh lain, tinggi dari device dikurang tinggi dari appbar dikurang dari padding top\nMediaQuery.of(context).size.width - appBar.preferredSize.height - MediaQuery.of(context).padding.top \n",
"description": "flutter ambil tinggi dan lebar dari device",
"scope": ""
},
"flutter mediaquery class": {
"prefix": "ff:mediaquery-class",
"body": "import 'package:flutter/widgets.dart';\n// CARA PANGGILNYA SizeConfig().init(context);\n// CARA PAKAI SizeConfig.sizeHeight;\nclass SizeConfig {\n static MediaQueryData _mediaQueryData;\n static double screenWidth;\n static double screenHeight;\n static double blockSizeHorizontal;\n static double blockSizeVertical;\n static double _safeAreaHorizontal;\n static double _safeAreaVertical;\n static double safeBlockHorizontal;\n static double safeBlockVertical;\n\n void init(BuildContext context){\n _mediaQueryData = MediaQuery.of(context);\n screenWidth = _mediaQueryData.size.width;\n screenHeight = _mediaQueryData.size.height;\n blockSizeHorizontal = screenWidth/100;\n blockSizeVertical = screenHeight/100;\n _safeAreaHorizontal = _mediaQueryData.padding.left +\n _mediaQueryData.padding.right;\n _safeAreaVertical = _mediaQueryData.padding.top +\n _mediaQueryData.padding.bottom;\n safeBlockHorizontal = (screenWidth - _safeAreaHorizontal)/100;\n safeBlockVertical = (screenHeight - _safeAreaVertical)/100;\n }\n}",
"description": "flutter mediaquery class",
"scope": ""
},
"flutter force orientation method": {
"prefix": "ff:orientation-force-potrait-landscape-function",
"body": "void main() {\n // FORCE tampilan aplikasi menjadi potrait\n WidgetsFlutterBinding.ensureInitialized();\n SystemChrome.setPreferredOrientations([\n DeviceOrientation.portraitUp, // ganti menjadi landscape apabila ingin mem force landscape\n DeviceOrientation.portraitDown,\n ]);\n runApp(MyApp());\n}\n",
"description": "flutter force potrail landscape device",
"scope": ""
},
"flutter cek orientation method": {
"prefix": "ff:orientation-cek-potrait-landscape-function",
"body": "MediaQuery.of(context).orientation == Orientation.landscape // true apabila orientation nya landscape",
"description": "flutter force potrail landscape device",
"scope": ""
},
"flutter hidden form keyboard method": {
"prefix": "ff:hidden-form-bottom-keyboard",
"body": "ListView(\n child: Form();//apabila form ter hidden oleh keyboard kita bisa me wrap nya dengan ListView/SingleChildScrollView\n);",
"description": "flutter hidden form bottom keyboard",
"scope": ""
},
"flutter cek platform device method": {
"prefix": "ff:cek-platform-ios/android-method",
"body": "import 'dart:io';\nPlatform.isIOS ? true:false; // cek platform isAndroid, isIOS, isWindow",
"description": "flutter cek platform ios/android",
"scope": ""
},
"flutter getx !": {
"prefix": "ff:getx-!-note",
"body": "// NAVIGATION ROUTE\ngetPages: [// ganti home : menjadi ini \n GetPage(name:'/',page:()=>IndexPage()),\n GetPage(name:'/about',page:()=>About(),transition: Transition.fadeIn),\n],\nGet.toNamed('/about',arguments: {'id':1});\nGet.to(About(),arguments: {'id':1}, transition: Transition.fadeIn);\nGet.arguments['id'];\nGet.ofAll(About());\nGet.back();\n\n// STATE MANAGEMENT\nclass StoreX extends GetxController{\n // update saat diperlukan\n var index=0;\n updateIndex(item){\n index+=item;\n update();\n }\n // reactive update\n var count=0.obs; // cukup tambahkan .obs maka akan menjadi reactive data panggil dengan Obx(() => Text(\"count\")), \n}\nfinal StoreX storex = Get.put(StoreX()); // mengambil controler taruh di bawah Widget build(BuildContext context) \nstorex.index; // akses property di controller\nstorex.updateIndex(5); // akses method di controller\nObx(() => Text(\"$$count\")), // menjadikan widget reactive dan observable\n\n// Snackbar\nGet.snackbar('Title', 'message',snackPosition: SnackPosition.BOTTOM);\n// ShowDialog\nGet.defaultDialog(title: 'title', content: Text('widget content'));\n// Show Modal Bottom Sheet\nGet.bottomSheet(Container(child: Text('bottom sheet'),));\n\n// PROPERTY \nGet.height //MediaQuery.of(context).size.height,\nGet.width //MediaQuery.of(context).size.width,\nGet.arguments// memberikan argument dari halaman yang sedang ditampilkan\nGet.previousRoute// memberikan nama dari route sebelumnya\nGet.rawRoute// memberikan akses raw route, contoh: rawRoute.isFirst()\nGet.routing// memberikan akses terhadap Routing API dari GetObserver\nGet.isSnackbarOpen// cek apakah snackbar sedang tampil\nGet.isDialogOpen// cek apakah dialog sedang tampil\nGet.isBottomSheetOpen// cek apakah bottomsheet sedang tampil\nGet.context// Memberikan konteks saat ini dari sebuah Navigator\nGet.contextOverlay// Memberikan konteks dari snackbar/dialog/bottomsheet di Gives the latar depan, dimanapun di kode anda\n// Cek di platform apa aplikasi sedang berjalan\nGetPlatform.isAndroid\nGetPlatform.isIOS\nGetPlatform.isMacOS\nGetPlatform.isWindows\nGetPlatform.isLinux\nGetPlatform.isFuchsia\n// Cek tipe perangkat\nGetPlatform.isMobile\nGetPlatform.isDesktop\n// di Windows, iOS, OSX, Android, dsb.\nGetPlatform.isWeb\n\n// LIFE CYCLE\n// Fungsi ini akan terpanggil ketika halaman dari route yang dipanggil sedang dicari. RouteSettings diperlukan untuk mengatur tujuan dari fungsi redirect.\nGetPage redirect( ) {\n final authService = Get.find();\n return authService.authed.value ? null : RouteSettings(name: '/login')\n}\n// Fungsi ini akan terpanggil ketika halaman yang dituju dipanggil sebelum apapun dibuat, anda bisa menggunakannya untuk mengubah sesuatu tentang halaman tersebut atau berikan halaman baru.\nGetPage onPageCalled(GetPage page) {\n final authService = Get.find();\n return page.copyWith(title: 'Welcome ${authService.UserName}');\n}\n// Fungsi ini akan terpanggil tepat setelah Binding ter-inisialisasi. Disini anda bisa melakukan sesuatu sebelum halaman yang dituju dibuat.\nGetPageBuilder onPageBuildStart(GetPageBuilder page) {\n print('bindings are ready');\n return page;\n}\n",
"description": "flutter getx note !",
"scope": ""
},
"flutter getx property !": {
"prefix": "ff:getx-property-!-note",
"body": "// PROPERTY \nGet.height //MediaQuery.of(context).size.height,\nGet.width //MediaQuery.of(context).size.width,\nGet.arguments// memberikan argument dari halaman yang sedang ditampilkan\nGet.previousRoute// memberikan nama dari route sebelumnya\nGet.rawRoute// memberikan akses raw route, contoh: rawRoute.isFirst()\nGet.routing// memberikan akses terhadap Routing API dari GetObserver\nGet.isSnackbarOpen// cek apakah snackbar sedang tampil\nGet.isDialogOpen// cek apakah dialog sedang tampil\nGet.isBottomSheetOpen// cek apakah bottomsheet sedang tampil\nGet.context// Memberikan konteks saat ini dari sebuah Navigator\nGet.contextOverlay// Memberikan konteks dari snackbar/dialog/bottomsheet di Gives the latar depan, dimanapun di kode anda\n// Cek di platform apa aplikasi sedang berjalan\nGetPlatform.isAndroid\nGetPlatform.isIOS\nGetPlatform.isMacOS\nGetPlatform.isWindows\nGetPlatform.isLinux\nGetPlatform.isFuchsia\n// Cek tipe perangkat\nGetPlatform.isMobile\nGetPlatform.isDesktop\n// di Windows, iOS, OSX, Android, dsb.\nGetPlatform.isWeb",
"description": "flutter getx note !",
"scope": ""
},
"flutter getx lifecycle !": {
"prefix": "ff:getx-lifecycle-!-note",
"body": "// LIFE CYCLE\n// Fungsi ini akan terpanggil ketika halaman dari route yang dipanggil sedang dicari. RouteSettings diperlukan untuk mengatur tujuan dari fungsi redirect.\nGetPage redirect( ) {\n final authService = Get.find();\n return authService.authed.value ? null : RouteSettings(name: '/login')\n}\n// Fungsi ini akan terpanggil ketika halaman yang dituju dipanggil sebelum apapun dibuat, anda bisa menggunakannya untuk mengubah sesuatu tentang halaman tersebut atau berikan halaman baru.\nGetPage onPageCalled(GetPage page) {\n final authService = Get.find();\n return page.copyWith(title: 'Welcome ${authService.UserName}');\n}\n// Fungsi ini akan terpanggil tepat setelah Binding ter-inisialisasi. Disini anda bisa melakukan sesuatu sebelum halaman yang dituju dibuat.\nGetPageBuilder onPageBuildStart(GetPageBuilder page) {\n print('bindings are ready');\n return page;\n}\n\n// life di statefull\nvoid initState(){\n super.initState();\n \n}",
"description": "flutter getx lifecycle !",
"scope": ""
},
"flutter getx navigation method": {
"prefix": "ff:getx-navigation-!-note-page",
"body": "// NAVIGATION ROUTE\ngetPages: [// ganti home : menjadi ini \n GetPage(name:'/',page:()=>IndexPage()),\n GetPage(name:'/about',page:()=>About(),transition: Transition.fadeIn),\n],\nGet.toNamed('/about',arguments: {'id':1});\nGet.to(About(),arguments: {'id':1}, transition: Transition.fadeIn);\nGet.arguments['id'];\nGet.ofAll(About());\nGet.back();",
"description": "flutter getx create named route",
"scope": ""
},
"flutter getx statemanagement method": {
"prefix": "ff:getx-statemanagement-!-note",
"body": "// STATE MANAGEMENT\nclass StoreX extends GetxController{\n // update saat diperlukan\n var index=0;\n updateIndex(item){\n index+=item;\n update();\n }\n // reactive update\n var count=0.obs; // cukup tambahkan .obs maka akan menjadi reactive data\n}\nfinal StoreX storex = Get.put(StoreX()); // mengambil controler taruh di bawah Widget build(BuildContext context) \nstorex.index; // akses property di controller\nstorex.updateIndex(5); // akses method di controller\nObx(() => Text(\"$count\")), // menjadikan widget reactive dan observable",
"description": "flutter getx statemanagement",
"scope": ""
},
"flutter getx create statex method": {
"prefix": "ff:getx-create-statex-class",
"body": "// STATE MANAGEMENT\nclass StoreX extends GetxController{\n // update saat diperlukan\n var index=0;\n updateIndex(item){\n index+=item;\n update();\n }\n // reactive update\n var count=0.obs; // cukup tambahkan .obs maka akan menjadi reactive data panggil dengan Obx(() => Text(\"$count\")), \n}\nfinal StoreX storex = Get.put(StoreX()); // mengambil controler taruh di bawah Widget build(BuildContext context) ",
"description": "flutter getx create statex",
"scope": ""
},
"flutter getx state obsx": {
"prefix": "ff:getx-obsx-state",
"body": "Obx(() => ${1:Text(\"$$count\")}), ",
"description": "flutter getx statemanagement",
"scope": ""
},
"flutter getx state obsx 2!": {
"prefix": "ff:getx-obsx-!-state",
"body": "Obx(() => Column(children: [// atau ListView\n Text(refresh.toString(),style: TextStyle(fontSize:0.1),),\n],),),",
"description": "flutter getx statemanagement",
"scope": ""
},
"flutter getx push method": {
"prefix": "ff:getx-to-push-navigation-page-router",
"body": "Get.to(${1:About()},arguments: {'id':1}, transition: Transition.fadeIn);",
"description": "flutter getx push to",
"scope": ""
},
"flutter getx snackbar method": {
"prefix": "ff:getx-snackbar-widget-method",
"body": "Get.snackbar('Title', 'message',snackPosition: SnackPosition.BOTTOM);",
"description": "flutter getx crete snackbar",
"scope": ""
},
"flutter getx dialogbox modal method": {
"prefix": "ff:getx-dialogbox-modal-widget-method",
"body": "Get.defaultDialog(title: 'title', content: Text('widget content'));",
"description": "flutter getx crete dialogbox",
"scope": ""
},
"flutter getx bottom sheet method": {
"prefix": "ff:getx-bottomsheet-modalbotom-widget-method",
"body": "Get.bottomSheet(Container(child: Text('bottom sheet'),));",
"description": "flutter getx crete buttom sheet modal",
"scope": ""
},
"flutter localstorage method": {
"prefix": "ff:getx-localstorage-method",
"body": "final LocalStorage storage = new LocalStorage('MyApp'); //import 'package:localstorage/localstorage.dart';\nstorage.setItem('auth._token.local', 'header asdnadjasdjkasd');\nstorage.getItem('auth._token.local');\nstorage.clear();",
"description": "flutter localstorage",
"scope": ""
},
"flutter http xmlhttprequest method": {
"prefix": "ff:http-axios-request-get-post",
"body": "// import 'package:http/http.dart' as http;\nvar res = await http.post(Uri.parse('url'), body: {'id': '1'});",
"description": "flutter http request",
"scope": ""
},
"flutter sdb all method": {
"prefix": "ff:sdb-!-all",
"body": " import '../plugins/autophp.dart';\nfinal LocalStorage storage = new LocalStorage('MyApp'); //\nvar sdb = new autophp();\n// SELECT\n var res = await sdb.collection(\"test\").doc('false').get(\"*\",\"order by id\");\n var res =await sdb.collection(\"test\").doc('false').select('select * from test');\n// SET/INSERT\n var res = await sdb.collection('test').doc('false').set({'id':'34','username':'aaaa','password':'aaaa','nama':'nama','email':'email@gmail.com'}); //vdata\n// DELETE\n var res = await sdb.collection(\"test\").doc(\"34\").delete();\n// UPLOAD FILE\nFilePickerResult result = await FilePicker.platform.pickFiles();\nif(result != null) {\n File file = File(result.files.single.path);\n var res = await sdb.collection(\"test\").doc('false').upload(file);\n print(res);\n} else {\n}\n// LOGIN\n var res = await sdb.collection('tbuser').login2({'username':'taufik','password':'taufik'});//vdata\n\n// REGISTER\n var res = await sdb.collection('tbuser').register({'username':'taufik','password':'taufik'});//vdata\n\n// CEKLOGIN\n var res = await sdb.collection('tbuser').ceklogin();\n",
"description": "flutter sdb all",
"scope": ""
},
"flutter sdb set method": {
"prefix": "ff:sdb-set-insert",
"body": "var res = await sdb.collection('test').doc('false').set(${1:{'id':'34','username':'aaaa','password':'aaaa'}}); //vdata",
"description": "flutter sdb insert",
"scope": ""
},
"flutter sdb select method": {
"prefix": "ff:sdb-select-get-insert",
"body": " var res = await sdb.collection(\"test\").doc('false').get(\"*\",\"order by id\");\n var res =await sdb.collection(\"test\").doc('false').select('select * from test');",
"description": "flutter sdb select get",
"scope": ""
},
"flutter sdb delete method": {
"prefix": "ff:sdb-delete",
"body": "var res = await sdb.collection('test').doc('34').delete();",
"description": "flutter sdb delete",
"scope": ""
},
"flutter sdb login method": {
"prefix": "ff:sdb-login2",
"body": "var res = await sdb.collection('tbuser').login2({'username':'taufik','password':'taufik'});//vdata",
"description": "flutter sdb login",
"scope": ""
},
"flutter sdb register method": {
"prefix": "ff:sdb-register",
"body": "var res = await sdb.collection('tbuser').register({'username':'taufik','password':'taufik'});//vdata",
"description": "flutter sdb register",
"scope": ""
},
"flutter sdb ceklogin method": {
"prefix": "ff:sdb-ceklogin",
"body": "var res = await sdb.collection('tbuser').ceklogin();",
"description": "flutter sdb ceklogin",
"scope": ""
},
"flutter sdb upload method": {
"prefix": "ff:sdb-upload",
"body": "FilePickerResult result = await FilePicker.platform.pickFiles();\nif(result != null) {\n File file = File(result.files.single.path);\n var res = await sdb.collection(\"test\").doc('false').upload(file);\n print(res);\n} else {\n}",
"description": "flutter sdb upload",
"scope": ""
},
"flutter change package app name": {
"prefix": "ff:change-appname-package",
"body": "flutter pub run change_app_package_name:main com.new.package.name",
"description": "flutter change appname",
"scope": ""
},
"flutter Command !": {
"prefix": "ff:command-cmd-!",
"body": "flutter run --no-sound-null-safety\nflutter clean\nflutter build apk \nflutter build apk --split-per-abi \nflutter build apk --split-per-abi --no-sound-null-safety\nflutter build bundle \n\n// GANTI NAMA APP PACKAGE NAME\n- flutter pub run change_app_package_name:main com.new.package.name \n\n// GANTI ICON , setting di pubspec.ymal\n- flutter pub get\n- flutter pub run flutter_launcher_icons:main\n\n\n// CREATE NEW APPS \nflutter create --org com.yourdomain appname",
"description": "flutter command",
"scope": ""
},
"flutter firebase database": {
"prefix": "ff:firebase-database-rdb-!",
"body": "FirebaseDatabase.instance.reference().child('table').push({});//create\nFirebaseDatabase.instance.reference().child('table/id').set({'some':'data'});//update\nFirebaseDatabase.instance.reference().child('table/id').set({});//delete\nFirebaseDatabase.instance.reference().child('table').once().then((DataSnapshot snapshot){ });//snapshot/read",
"description": "flutter rdb",
"scope": ""
},
"flutter firebase firestore": {
"prefix": "ff:firebase-firestore-db-!",
"body": "FirebaseFirestore.instance.collection('table').add({'data':'data'}).then((value) => null); //insert\nFirebaseFirestore.instance.collection('table').doc(id).set({'user':'nama'}).then((res){ }); // update\nFirebaseFirestore.instance.collection('table').doc(id).delete().then((res){ }); //delete\nFirebaseFirestore.instance.collection('table').get().then((res){ // select\n var data = res.docs.map((e) => e.data());\n });\nFirebaseFirestore.instance.collection('table').get().then((QuerySnapshot snapshot){ // snapshot\n var data = snapshot.docs.map((e) => e.data());\n});\nFirebaseFirestore.instance.collection('table').snapshots();//snapshot",
"description": "flutter firestore",
"scope": ""
},
"flutter iteration with index": {
"prefix": "ff:iteration-map-with-index-method",
"body": "List map(List list, Function handler) {\n List result = [];\n for (var i = 0; i < list.length; i++) {\n result.add(handler(i, list[i]));\n }\n return result;\n }\n // cara menggunakannya \n children : map(listItem, (index, url) { // listItem adalah variable List/array \n return Text(index);\n }",
"description": "flutter firestore",
"scope": ""
},
"flutter futute builder": {
"prefix": "ff:future-builder-listview-async-await-loading",
"body": "Future getData() async {\n List res = jsonDecode(await sdb.collection(\"tbuser\").doc('false').get(\"*\",\"order by id\"));\n return res;\n}\nFutureBuilder(\n future: getData(),\n builder: (context, snapshot) {\n if (snapshot.hasData) {\n final datanya = snapshot.data as List;\n return ListView.builder(\n itemCount: datanya.length,\n itemBuilder: (context, index) {\n return Container(child: Text('ok'),);\n }\n );\n } else {\n return Center (\n child: CircularProgressIndicator()\n );\n }\n },\n),",
"description": "flutter future builder",
"scope": ""
},
"flutter futute builder column": {
"prefix": "ff:future-builder-column-async-await-loading",
"body": "Future getData() async {\n List res = jsonDecode(await sdb.collection(\"tbuser\").doc('false').get(\"*\",\"order by id\"));\n return res;\n}\nFutureBuilder(\n future: getData(),\n builder: (context, snapshot) {\n if (snapshot.hasData) {\n final datanya = snapshot.data as List;\n return Column(children: [\n for ( var i in datanya ) Text(i.toString())\n ],);\n } else {\n return Center (\n child: CircularProgressIndicator()\n );\n }\n },\n),",
"description": "flutter future builder",
"scope": ""
},
"flutter futute builder column with pull refresh": {
"prefix": "ff:future-builder-!-pull-refresh",
"body": "var refresh = 1.obs;\nFuture getData() async {\n List res = jsonDecode(\n await sdb.collection(\"test\").doc('false').select('select * from tbuser'));\n return res;\n}\nRefreshIndicator(\n onRefresh: () async {\n refresh++;\n },\n child: ListView(children: [\n Obx(\n () => Column(\n children: [\n Text(refresh.toString(),style: TextStyle(fontSize:0.1),),\n FutureBuilder(\n future: getData(),\n builder: (context, snapshot) {\n if (snapshot.hasData) {\n final datanya=snapshot.data as List;\n return Column(\n children: [\n for ( var i in datanya ) Text(i.toString())\n ],\n );\n } else {\n return Center(child: CircularProgressIndicator());\n }\n },\n ),\n ],\n ),\n ),\n ]),\n )",
"description": "flutter future builder",
"scope": ""
},
"flutter pull refresh": {
"prefix": "ff:pull-refresh-future-!",
"body": "var refresh = 1.obs;\nRow(mainAxisAlignment: MainAxisAlignment.center, // posisi element harus jadi paling atas , stack paling bawah\n children: [\n Container(\n width: 150,\n color: Colors.blue,\n height: 130,\n child: RefreshIndicator(\n onRefresh: () async {\n refresh++;\n },\n child: ListView(children: [\n Obx(\n () => Text(refresh.toString(),style: TextStyle(fontSize:0.1),),\n ),\n ]),\n ),\n ),\n ],\n)",
"description": "flutter pull to refresh",
"scope": ""
},
"flutter cache-image": {
"prefix": "ff:image-cached-netword",
"body": "CachedNetworkImage(\n fit: BoxFit.fill,\n placeholder: (context, url) => CircularProgressIndicator(),\n imageUrl:'https://picsum.photos/250?image=9',\n),",
"description": "flutter cache image",
"scope": ""
},
"flutter url launcher": {
"prefix": "ff:url-launcher",
"body": "import 'package:url_launcher/url_launcher.dart';\nvar _url =\"https://svgrepo.com\";\nawait canLaunch(_url)? await launch(_url): throw 'Could not launch $_url';",
"description": "flutter url launcher",
"scope": ""
},
"flutter hive storage": {
"prefix": "ff:hive-storage",
"body": "var box = await Hive.openBox('favoriteitem');\nbox.put('favorite',true);\nbox.get('favorite');",
"description": "flutter hive storage",
"scope": ""
},
"flutter hive init": {
"prefix": "ff:hive-init",
"body": "import 'package:hive/hive.dart';\nimport 'package:hive_flutter/hive_flutter.dart';\nimport 'package:path_provider/path_provider.dart' as path_d;\nDirectory document= await path_d.getApplicationDocumentsDirectory();\nHive.init(document.path);",
"description": "flutter hive init",
"scope": ""
},
"flutter geolocator init": {
"prefix": "ff:geolocator-gps-init",
"body": "import 'package:flutter/material.dart';\nimport 'package:get/get.dart';\nimport 'package:geolocator/geolocator.dart';\n\n// FCM\nclass GeolocatorInit {\n Future gpsPermission() async {\n bool serviceEnabled;\n LocationPermission permission;\n\n // Test if location services are enabled.\n serviceEnabled = await Geolocator.isLocationServiceEnabled();\n if (!serviceEnabled) {\n // Location services are not enabled don't continue\n // accessing the position and request users of the \n // App to enable the location services.\n return Future.error('Location services are disabled.');\n }\n\n permission = await Geolocator.checkPermission();\n if (permission == LocationPermission.denied) {\n permission = await Geolocator.requestPermission();\n if (permission == LocationPermission.denied) {\n // Permissions are denied, next time you could try\n // requesting permissions again (this is also where\n // Android's shouldShowRequestPermissionRationale \n // returned true. According to Android guidelines\n // your App should show an explanatory UI now.\n return Future.error('Location permissions are denied');\n }\n }\n \n if (permission == LocationPermission.deniedForever) {\n // Permissions are denied forever, handle appropriately. \n return Future.error(\n 'Location permissions are permanently denied, we cannot request permissions.');\n } \n\n // Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high); // getlocation\n // StreamSubscription positionStream = Geolocator.getPositionStream(locationOptions).listen(\n // (Position position) {\n // print(position == null ? 'Unknown' : position.latitude.toString() + ', ' + position.longitude.toString());\n // });\n // return await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);\n }\n\n Future currentGpsLocation() async{\n return await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);\n }\n\n void getLocationStream(){\n var homeTabPostionStream;\n\n // homeTabPostionStream = Geolocator.getPositionStream(\n // desiredAccuracy: LocationAccuracy.bestForNavigation,\n // distanceFilter: 4).listen((event) {\n // });\n var positionStream = Geolocator.getPositionStream(desiredAccuracy: LocationAccuracy.bestForNavigation,\n distanceFilter: 4).listen(\n (Position position) {\n print(position == null ? 'Unknown' : position.latitude.toString() + ', ' + position.longitude.toString());\n });\n }\n\n\n void openGPSSetting() async{\n await Geolocator.openAppSettings();\n await Geolocator.openLocationSettings();\n }\n}\n",
"description": "flutter geolocator init",
"scope": ""
},
"flutter fcm init": {
"prefix": "ff:fcm-notifikasi-init",
"body": "import 'package:flutter/material.dart';\nimport 'package:get/get.dart';\nimport 'package:firebase_core/firebase_core.dart';\nimport 'package:firebase_messaging/firebase_messaging.dart';\nimport 'package:flutter_local_notifications/flutter_local_notifications.dart';\n\n// FCM\nclass FcmInit {\n FirebaseMessaging messaging = FirebaseMessaging.instance;\n init() {\n handleFcm();\n _createNotificationChannel(\n \"channel_id_1\", \"test-channel\", \"description\", \"notifs\"); // notifs adalah nama file mp3 di folder raw\n }\n\n handleFcm() async {\n NotificationSettings settings = await messaging.requestPermission(\n alert: true,\n announcement: true,\n badge: true,\n carPlay: false,\n criticalAlert: false,\n provisional: false,\n sound: true,\n );\n print('User granted permission: ${settings.authorizationStatus}');\n String token = await messaging.getToken(\n vapidKey:\n \"BKHN8e1WJjh-ENIye56Uq_o2u_ZKUo2wY3kByMLxANgdCJdR4wySwEyffkrHtgEpiAP-0Uso76yWXH5zNMTOCDU\", // firebase Web Push certificates\n );\n print(token); // simpan token ke database\n FirebaseMessaging.onMessage.listen((message) {\n print('Got a message whilst in the foreground!');\n print('Message data: ${message.data}'); // cek notifikasi di foreground\n Get.snackbar('Notifikasi terbaru', 'baru',\n snackPosition: SnackPosition.BOTTOM);\n\n if (message.notification != null) {\n print('Message also contained a notification: ${message.notification}');\n }\n });\n\n await FirebaseMessaging.instance.subscribeToTopic('weather'); // topic\n }\n\n initBackground(){\n FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);\n }\n\n @override\n Widget build(BuildContext context) {\n return null;\n }\n}\n\nFuture _firebaseMessagingBackgroundHandler(RemoteMessage message) async {\n await Firebase.initializeApp();\n print(\"Handling a background message: ${message.messageId}\");\n}\n\nFuture _createNotificationChannel(\n String id, String name, String description, String sound) async {\n final flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();\n var androidNotificationChannel = AndroidNotificationChannel(\n id,\n name,\n description,\n sound: RawResourceAndroidNotificationSound(sound),\n playSound: true,\n );\n\n await flutterLocalNotificationsPlugin\n .resolvePlatformSpecificImplementation<\n AndroidFlutterLocalNotificationsPlugin>()\n ?.createNotificationChannel(androidNotificationChannel);\n}\n",
"description": "flutter fcm init",
"scope": ""
},
"flutter custom appbar": {
"prefix": "ff:custom-appbar-component",
"body": "Container(\n // appbar\n width: double.infinity,\n height: 70,\n decoration: BoxDecoration(\n gradient: LinearGradient(\n begin: Alignment.topRight,\n end: Alignment.bottomLeft,\n colors: [\n Colors.greenAccent,\n Colors.green,\n ],\n )),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n crossAxisAlignment: CrossAxisAlignment.center,\n children: [\n Flexible(\n flex: 2,\n child: ElevatedButton(\n style: ElevatedButton.styleFrom(\n onPrimary: Colors.black87,\n elevation: 5,\n primary: Colors.grey[300],\n padding: EdgeInsets.all(5),\n shape: CircleBorder(),\n ),\n onPressed: () {\n Get.back();\n },\n child: Icon(\n //https://fonts.google.com/icons?selected=Material+Icons\n Icons.arrow_back,\n color: Colors.black,\n size: 30.0,\n ),\n ),\n ),\n Flexible(\n flex: 3,\n child: Image.network(\n 'https://upload.egov.balangankab.go.id/files/kopbalangan.png',\n fit: BoxFit.fill,\n loadingBuilder: (BuildContext context,\n Widget child,\n ImageChunkEvent loadingProgress) {\n if (loadingProgress == null) return child;\n return Center(\n child: CircularProgressIndicator(\n value: loadingProgress.expectedTotalBytes !=\n null\n ? loadingProgress\n .cumulativeBytesLoaded /\n loadingProgress.expectedTotalBytes\n : null,\n ),\n );\n },\n ),\n ),\n Text(' '),\n ],\n ),\n )",
"description": "flutter custom appbar",
"scope": ""
},
"flutter html parser": {
"prefix": "ff:string-html-parser",
"body": "// import 'package:html/parser.dart';\nString _parseHtmlString(String htmlString) {\n final document = parse(htmlString);\n final String parsedString =\n parse(document.body.text).documentElement.text;\n\n return parsedString;\n}",
"description": "flutter string html parser",
"scope": ""
},
"flutter version 29": {
"prefix": "ff:dart-2.9-fix-version-fix-null-safety",
"body": "//@dart=2.9",
"description": "flutter string html parser",
"scope": ""
},
"flutter fix null": {
"prefix": "ff:fix-null-safety",
"body": "String ?${1:nama};\n${1:nama} ?? ''",
"description": "flutter string html parser",
"scope": ""
},
"flutter components": {
"prefix": "ff:flutter-components-!",
"body": "import '../controller/StoreX.dart';\nimport 'package:flutter/material.dart';\nimport 'package:get/get.dart';\n// import 'package:http/http.dart' as http;\n// import 'package:intl/intl.dart';\n// import 'dart:async';\n\nimport '../plugins/autophp.dart';\n\nvar sdb = new autophp();\n\nclass ${1:ComponentName} extends StatelessWidget {\n @override\n var refresh=1.obs;\n Widget build(BuildContext context) {\n final StoreX storex =\n Get.put(StoreX()); // buat file ./controller/StoreX.dart\n var vdata = {}; // new Map.from(vdata); <- apabila mengambil vdata untuk memutus object reference\n return Obx(() => Column(children: [// atau ListView\n Text(refresh.toString(),style: TextStyle(fontSize:0.1),),\n Container(child: Text('ok'),)\n ],),);\n }\n}\n",
"description": "flutter components default",
"scope": ""
},
"flutter index page sub": {
"prefix": "ff:flutter-sub-index-page-!",
"body": "import '../../components/BottomBar.dart';\nimport '../../pages/TerdekatPage.dart';\nimport 'package:flutter/material.dart';\nimport 'package:get/get.dart';\nimport 'package:url_launcher/url_launcher.dart';\nimport '../../plugins/autophp_smartapp.dart';\n\nvar sdb = new autophp();\nclass ${1:IndexSubPage} extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var refresh = 1.obs;\n return Scaffold(\n // ================ body\n body: SafeArea(\n child: Builder(\n builder: (context) => Stack(children: [\n // Positioned() disini\n Column(\n children: [\n // atau ListView\n Container(\n // appbar / HEADER\n width: double.infinity,\n height: 70,\n decoration: BoxDecoration(\n gradient: LinearGradient(\n begin: Alignment.topRight,\n end: Alignment.bottomLeft,\n colors: [\n Colors.greenAccent,\n Colors.green,\n ],\n )),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n crossAxisAlignment: CrossAxisAlignment.center,\n children: [\n Flexible(\n flex: 2,\n child: ElevatedButton(\n style: ElevatedButton.styleFrom(\n onPrimary: Colors.black87,\n elevation: 5,\n primary: Colors.grey[300],\n padding: EdgeInsets.all(5),\n shape: CircleBorder(),\n ),\n onPressed: () {\n Get.back();\n },\n child: Icon(\n //https://fonts.google.com/icons?selected=Material+Icons\n Icons.arrow_back,\n color: Colors.black,\n size: 30.0,\n ),\n ),\n ),\n Flexible(\n flex: 3,\n child: Image( //width,height\n image: NetworkImage('https://upload.egov.balangankab.go.id/files/kopbalangan.png'), // NetworkImage(url), AssetImage()\n fit: BoxFit.fill,//fill,cover , etc\n ),\n ),\n Text(' '),\n ],\n ),\n ),\n // CONTENT=======================================\n Container(\n padding: EdgeInsets.all(10),\n child: Text('INFO HARIAN', style: TextStyle(fontSize: 19,fontWeight: FontWeight.bold),),\n ),\n\n // CONTENT=======================================\n ],\n ),\n // SCROLL TO REFRESH\n Positioned(\n top: -40,\n left: Get.width * 0.3,\n child: Row(\n mainAxisAlignment: MainAxisAlignment\n .center, // posisi element harus jadi paling atas , stack paling bawah\n children: [\n Container(\n width: 150,\n height: 130,\n child: RefreshIndicator(\n onRefresh: () async {\n refresh++;\n },\n child: ListView(children: [\n Obx(\n () => Text(\n refresh.toString(),\n style: TextStyle(fontSize: 0.1),\n ),\n ),\n ]),\n ),\n ),\n ],\n ),\n )\n ]),\n ),\n ),\n // drawer\n floatingActionButton: FloatingActionButton(\n onPressed: () {\n Get.to(TerdekatPage());\n },\n backgroundColor: Colors.blue.withOpacity(0.5),\n child: Icon(Icons.pin_drop),\n ),\n floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,\n bottomNavigationBar: BottomBar1(), // import dari Components BottomBar\n );\n }\n}\n",
"description": "flutter components default",
"scope": ""
},
"flutter catatan widget": {
"prefix": "ff:catatan-widget",
"body": "Container - seperti div \nStack - div tapi dalam bentuk absolute atau fixed \nColumn - membuat container column/baris vertical\nRow - membuat container ROW/baris horizontal \nFlexible / Extended - untuk menfill suatu wilayah dalam Colum/Row dan menjadikan perbandingan dengan property flex \nFitbox - menfill suatu wilayah dalam Container\nPositioned - memposisikan sebuah widget didalam Stack \nText - container text \nAlign - memposisikan widget didalam container \nElevatedButton - membuat button \nDivider - membuat garis \nFutureBuilder - berfungsi mengambil data ke api didalam proses widget \nGestureTouch - menambahkan event didalam sebuah widget seperti click \nGridView - membuat barisan widget secara rapi \nListView - membuat scrollable div overflow \nImage - menampilkan image gambar \nSafeArea - membuat tampilan apps fit dengan bentuk melengkung device ",
"description": "flutter catatan widget",
"scope": ""
},
"flutter layout container": {
"prefix": "ff:layout-!-expanded",
"body": "Expanded(\nflex: 1,\nchild: Container(\n height: Get.height,\n width: Get.width,\n child: Text(\"\"),\n)),",
"description": "flutter contoh layout expanded",
"scope": ""
},
"flutter for loop inside column": {
"prefix": "ff:for-iterable-coloumn",
"body": "for ( var i in datanya ) Text(i.toString())",
"description": "iterable for inside column []",
"scope": ""
},
"flutter container box gradient": {
"prefix": "ff:gradient-decoration-box-container",
"body": "BoxDecoration(\n gradient: LinearGradient(\n begin: Alignment.topRight,\n end: Alignment.bottomLeft,\n colors: [\n Colors.blue.withOpacity(0.7),\n Colors.white.withOpacity(0.7),\n ],\n)),",
"description": "gradient",
"scope": ""
},
} ![\"$2\"](\"${4:./img/icon.jpg|@/static/icon.png|@/assets/icon.png}\"){kind=icon}
\n",
"description": "image default"
},
"adb connect": {
"prefix": "QQ:adb-connect-emulator-nox",
"body": "adb connect 127.0.0.1:62001",
"description": "adb connect android emulator"
},
"div center vertical and horizontal": {
"prefix": "QQ:html-center-div-vertical-horizontal",
"body": "position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);",
"description": "image center of div vertical and horizontal"
},
"div center bootstrap css style": {
"prefix": "QQ:html-center-div-bootstrap-class-style-middle",
"body": "