X

Saturday, October 1, 2022

Membuat Project Baru dengan Next Js

Next Js merupakan framework frontend berbasis React. Framework ini di ciptakan untuk mengatasi masalah client-side rendering yang dimiliki React.

Seperti yang diketahui website yang dibuat menggunakan React Js terasa lebih ringan. Hal ini dikarenakan React lebih efisien dalam mengupdate halaman, dimana yang di update hanya bagian tertentu saja tanpa meload satu halaman. Untuk mendapatkan semua itu client pertama kali harus memuat semua file javascript sebelum konten halaman di tampilkan. Jika file Js cukup besar maka perlu waktu yang lama untuk meload website pertama kali. Hal inilah yang menjadi salah satu kekurangan dari React Js.

Untuk mengatasi masalah tersebut dapat menggunakan teknik pre-rendering yaitu Server Side Rendering (SSR) dan Static Side Generator. Next js mendukung untuk melakukan kedua teknik pre-rendering tersebut.

Membuat Project Baru Next Js

Berikut langkah-langkah untuk membuat project baru dengan Next js

Jalankan perintah berikut pada CMD, atau Terminal 

    npx create-next-app hello
"hello" merupakan nama project

Jika muncul seperti pada gambar, tekan enter, hal ini untuk menginstall dependencies yang dibutuhkan.




Untuk menjalankan project masuk ke folder project yang telah dibuat menggunakan terminal kemudian ketikkan perintah berikut 

npm run dev




Read More

Perintah-perintah Dasar Git dan Penjelasannya


 

GIT merupakan sebuah sistem pengontrol versi (Version Control System) pada proyek perangkat lunak. Tools ini diciptakan oleh Linus Torvalds yang sangat membantu dalam pengerjaan project-project besar.

Tentunya kalian sudah cukup paham mengenai apa itu GIT, disini kita tidak akan membahas lebih jauh tentang apa itu GIT, melainkan perintah-perintah dasar dalam menggunakan git.

Berikut perintah-perintah dasar GIT

No. Perintah Kegunaan
1. git config --global Perintah untuk mengatur configurasi git seperti email, algoritma untuk diff, username, format file, dll. Contoh : git config --global user.email coding@coding.com
2. git init Untuk membuat repositori baru
3. git add Untuk menambahkan file baru ke repositori
4. git clone file@domain.com/path/repositori Git clone untuk melakukan cloningan dari repositori dari server ke lokal
5. git commit -m "keterangan" Digunakan untuk menyimpan perubahan yang telah di lakukan
6. git status Perintah untuk menampilkan daftar file yang berubah bersama dengan file yang ingin di tambahkan atau di-commit
7. git push Digunakan untuk mengirim perubahan ke master branch. Contoh untuk push ke branch v1 : git branch origin v1
8. git checkout Untuk berpindah branch
9. git checkout -b nama_branch Membuat branch baru
10. git remote -v Melihat url repository yang sedang di remote
11. git branch Melihat branch yang sedang digunakan
12. git branch -d nama_branch Menghapus branch sesuai nama
13. git pull Menarik dan menggabungkan semua perubahan yang ada di remote repositori ke lokal
14. git marge Menggabungkan branch yang di pilih ke branch yang sedang aktif atau digunaka. Contoh : git marge Master
15. git reset --hard HEAD Mereset sesuai dengan repositori paling baru.
Read More

Friday, September 30, 2022

Instalasi Vue Js dan Membuat Project Baru


 

Vue Js merupakan salah satu framework atau kerangka kerja javascript yang bekerja di sisi front end. Framework ini bersifat open source yang dapat digunakan untuk mempermudah dalam membuat antar muka website

Instalasi

Hal pertama yang wajib di pelajari adalah cara Instalasi Vue.js untuk membuat project baru. Ada dua cara yang bisa digunakan dalam instalasi vue.js yaitu menggunakan CDN : 

    
    <html lang="en">
      <head>
        <meta charset="UTF-8"></meta>
        <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
        <title>Aplikasi Vue JS</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      </head>
      <body>
        <div id="app">
          <h1>{{pesan}}</h1>
        </div>
        <script>
          const App = new Vue({
            el: '#app',
            data: {
              pesan: 'Hello World!',
            }
          })
        </script>
      </body>
    </html>
Selain itu kita bisa menggunakan cara kedua Vue CLI, untuk caranya anda perlu menginstall node js terlebih dahulu kemudian menjalankan perintah berikut : 

    npm i -g @vue/cli @vue/cli-service-global
atau jika anda menggunakan yarn : 

    yarn global add @vue/cli @vue/cli-service-global

Membuat project baru

Membuat project baru dengan vue js sangatlah mudah, jika anda menggunakan CDN anda tinggal menambahkan code seperti di atas. Jika anda menggunakan CLI anda tinggal menjalankan perintah berikut : 

vue create new-app
new-app merupakan nama project yang akan dibuat. Setelah project berhasil di buat, gunakan perintah "npm run serve" untuk menjalankan project.
Read More

Tuesday, September 6, 2022

Menghubungkan Bot Telegram dengan Spreadsheet

Tahukah kalian bahwa kita bisa membuat aplikasi dengan menggabungkan bot Telegram dengan Spreadsheet, caranya pun terbilang sangat mudah. Sebelum kita lanjut, ada baiknya mengetahui terlebih dahulu apa itu bot telegram.

bot telegram adalah fitur ataupun akun yang ada di telegram dimana akun ini dioperasikan seperti bot atau AI yang dapat di desain sesuai kebutuhan. Salah satu fungsi yang paling banyak digunakan adalah menjawab pesan yang masuk secara otomatis.

Pada postingan kali ini kita akan membuat sebuah bot telegram yang dapat mengambil ataupun menginput data ke spreadsheet layaknya database.

Silahkan ikuti langkah-langkah di bawah ini :

1. Buat akun bot telegram, silahkan ketikkan "BotFather " di pencarian telegram kemudian pilih yang bercentang biru.

2. Tekan tombol start kemudian masukkan nama yang terdiri dari 5 - 32 karakter, kemudian masukkan username yang di inginkan. 




3. Selanjutnya bila berhasil akan muncul respon berisi token dari botFather, silahkan simpan token ini.

4. Buka spreadsheet kemudian buat file baru.

5. Isi file baru sesuai gambar di bawah :




6. Klik Extensi -> Apps Script




7. Selanjutnya akan muncul editor seperti pada gambar di bawah :




8. Klik icon tambah pada library kemudian tambahkan Google Sheets API




9. Edit Kode.gs seperti berikut 


var token = "MASUKKAN_TOKEN_BOT_ANDA_DISINI";
var SheetID = "MASUKKAN_SHEET_ID_DISINI";
var url = "TEMPEL_URL_HASIL_DEPLOY_DISINI";

function doPost(e) { 
 
  var stringJson = e.postData.getDataAsString();
  var updates = JSON.parse(stringJson);
  var pesan_dari_bot = updates.message.text;
  var jenisAksi = pesan_dari_bot.toLowerCase();
  var id_pesan = updates.message.chat.id;


  switch(jenisAksi) {
    case "ambil_data":
    	var data = AmbilDataDariSheet();
    	sendText(id_pesan,data);
    	break;
    case "input_data":
    	InputDataKeSheet("Pulpen", "A2");
    	InputDataKeSheet("Alat tulis", "B2");
    	InputDataKeSheet(10, "C2");
    	InputDataKeSheet(2000, "D2");
    	break;
    default:  
    	sendText(id_pesan,"Aksi tisak ada!");    
  }  

  
}

function InputDataKeSheet(isi, posisi){
  	var request = {
        majorDimension: "ROWS",
        values: [[isi]]
    };

 	Sheets.Spreadsheets.Values.update(
      request,
      SheetID,
      "Sheet1!"+posisi,
      {valueInputOption: "USER_ENTERED"}
    );
    return true;
}

function AmbilDataDariSheet(){
	var data = "";
    var rows = Sheets.Spreadsheets.Values.get(SheetID, "Sheet1!A2:D2").values;
    for (var row = 0; row < rows.length; row++) {
    	data = "Nama Barang : " + rows[row][0] + "\n\n" +
    		"Deskripsi : " + rows[row][1] + "\n" +
    		"Jumlah : " + rows[row][2] + "\n" +
    		"Harga Satuan : " + rows[row][3] + "\n";
    }
    return data;
}

function setbot(){
  var link = "https://api.telegram.org/bot"+token+"/setWebhook?url="+url;
  var a = UrlFetchApp.fetch(link);
  Logger.log(a);
}


function sendText(chatid,text,replymarkup){
var data = {
    method: "post",
    payload: {
      method: "sendMessage",
      chat_id: String(chatid),
      text: text,
      parse_mode: "HTML",
      reply_markup: JSON.stringify(replymarkup)
    }
  };
  UrlFetchApp.fetch('https://api.telegram.org/bot' + token + '/', data);
}
Isi token sesuai token bot telegram yang telah dibuat. SheetID bisa di dapatkan pada url Spreadsheet anda pada bagian seperti pada gambar di bawah :




Sedangkan url bisa akan ada setelah melakukan deployment.

10. Klik Terapkan -> Deployment baru




11. Klik ikon pengaturan kemudian pilih aplikasi web




12. Isi deskripsi, dan pilih yang memiliki akses sebagai "siapa saja" kemudian klik terapkan




13. Klik Izinkan akses kemudian login ke akun google anda dan berikan akses.



Jika muncul seperti gambar di ata klik advance kemudian "Go to Project tak berjudul (unsafe)". Selanjutnya allow pada halaman selanjutnya.

14. Selanjutnya akan muncul ID penerapan dan URL. Silahkan salin url untuk ditempel pada codingan yg telah dibuat tadi.



15. Paste url ke bagian: 


var url = "TEMPEL_URL_HASIL_DEPLOY_DISINI";
16. Selanjutnya pada bar pilih save kemudian pilih setBot kemudian klik jalankan




Hal ini untuk membuat bot telegram berinteraksi dengan spreadsheet yang telah dibuat dan bisa menjalankan kode.

Perlu di perhatikan setiap kali anda melakukan perubahan pada kode silahkan save, kemudian ulangi langkah 10 - 16. Jika tidak kode perubahan tidak akan diterapkan.

Kurang lebih contohnya akan tampak seperti berikut : 

 


 

Read More

Tuesday, June 14, 2022

Mengenal Apa itu DOM di Javascript

Salah satu hal yang wajib kamu pahami saat belajar javascript adalah DOM.
Penerapan DOM dalam pembuatan website akan membuat website yang di bangun lebih dinamis dan interaktif.

Apa itu DOM ?

DOM merupakan singkatan dari Document Object Model yang mana artinya, dokumen HTML yang dimodelkan dalam sebuah objek. Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript yang merupakan standar dari XML dan HTML yang memiliki sifat platform independent. DOM memungkinkan untuk melakukan perubahan struktur, gaya, dan konten dokumen. Selain XML dan HTML DOM juga bisa digunakan untuk dokumen SVG.

Bagaimana Cara Menggunakan DOM ?

Berikut beberapa contoh penggunaan DOM :
1. Menulis kedalam HTML
Untuk menulis keadalam html tanpa mendefenisikan tag mana yang akan di tuliskan kita dapat menggunakan fungsi document.write(). Contoh penggunaannya : 
	
document.write("Selamat Datang");
document.write("<h1>Saya sedang mempelajari cara kerja DOM di Javascript</h1>");
2. Mengakses Elemen secara spesifik
Mengakses elemen secara spesifik memungkinkan anda untuk melakukan perubahan pada tag html secara spesifik. Kita dapat menggunakan fungsi-fungsi yang dapat disesuaikan dengan kebutuhan. Berikut beberapa fungsi yang paling sering digunakan dalam melakukan DOM di Javascript.
  • getElementById() fungsi untuk memilih element berdasarkan id yang telah di definisikan pada tag html.
  • getElementByName() fungsi untuk memilih element berdasarkan name yang telah di definisikan pada tag html.
  • getElementByClassName() fungsi untuk memilih element berdasarkan class yang telah di definisikan pada tag html.
  • getElementByTagName() fungsi untuk memilih element berdasarkan tag name pada html.
  • querySelector() fungsi untuk memilih element berdasarkan query.
  • querySelectorAll() fungsi untuk memilih element berdasarkan query secara multiple.

Selain fungsi di atas masi banyak lagi fungsi-fungsi yang lainnya. 


3. Membuat Element

Selain melakukan DOM pada element yang sudah ada pada html, DOM juga memungkinkan untuk membuat elemet dan menambahkannya kedalam dokumen. Untuk melakukan aksi ini digunakan fungsi document.createElement(). Contohnya seperti berikut : 


p = document.createElement('p');
Contoh di atas akan menghasilkan tag/element paragraf yang didefinisikan kedalam variabel p.
Read More

Monday, June 6, 2022

Cara Menghubungkan Database Mysql dengan Django

Mysql merupakan salah satu database yang paling banyak digunakan. Kali ini kita akan membuat database mysql terhubung dengan aplikasi django yang telah di buat. Untuk yang belum tahu bagaimana cara membuat project baru dengan django silahkan klik disini.

Menghubungkan Database Mysql dengan Django

1. Hal pertama yang harus dilakukan adalah menginstall "mysqlclient" menggunakan PIP. Caranya cukup buka terminal arahkan ke folder project anda kemudian ketikkan perintah pip install mysqlclient kemudian tunggu hingga proses install selesai.

2. Buka file settings.py yang ada di nama_project/settings.py kemudian edit bagian code : 
	
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}
Ubah menjadi seperti code di bawah ini : 
	
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'namadatabase',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

3. Pastikan server local anda sudah jalan dan jangan lupa membuat database yang di inginkan.

4. Gunakan perintah python manage.py migrate untuk membuat table migration yang telah tersedia. Fitur ini sama halnya seprti php artisan migrate pada laravel.

Itulah tadi cara menghubungkan project web django dengan database mysql.
Read More

Thursday, April 14, 2022

Membuat Database Menggunakan Fitur Migration Laravel

Migration merupakan salah satu fitur yang disediakan oleh laravel yang bertindak sebagai version control database. Fitur migration dapat digunakan untuk membuat, mengedit, menambahkan data, hingga menghapus database.

Migration sangat membantu dalam pembuatan database tanpa harus membuka PhpMyadmin. Developer yang bekerja dengan banyak tim dapat melakukan syncronisasi database dengan mudah.

Sebagai contoh misalkan dalam satu project dikerjakan oleh si A, B, dan C. Ketika si A menambahkan tabel baru ke database local miliknya otomatis B dan C juga harus menambahkan tabel tersebut. Alih-alih mengcopy database, B dan C dapat langsung mengcopy migration dari si A yang mana ketika dijalankan akan membuat tabel baru sesuai tabel yang didefinisikan oleh si A.

Lebih baik lagi apabila project tim menggunakan Git atau layanan berbasis Version Controller System lainnya. Programer hanya perlus melakukan Git Pull untuk mengambil migration yang telah di buat.

Brikut langkah membuat migration di Laravel :

1. Buka terminal/cmd kemudian ketikkan perintah "php artisan make:migration create_nama_table". Ganti nama dengan nama table yang akan dibuat, misalnya untuk pembuatan table konsumen maka ketikkan perintah "php artisan make:migration create_konsumen_table" kemudian tekan enter.

2. Akan muncul file baru di "database/migrations/tanggal_nama_migration.php". Buka file tersebut kemudian edit.

3. Copy code dibawah dan tempelkan pada class migration yang telah dibuat. 
	
		    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('konsumen', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('status');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('konsumen');
    }


Penjelasan : "Schema::create('konsumen', function (Blueprint $table) {" merupakan perintah untuk membuat tabel baru dengan nama konsumen dimana isinya berupa id, name, status, timestamps (nantinya akan membentuk 2 field yaitu created_at dan updated_at).

4. Jalankan perintah "php artisan migrate" sehingga program akan membuat table konsumen secara otomatis.

5. Untuk membatalkan guanakan perintah "php artisan migrate:rollback", sistem akan membatalkan migrate terakhir. Jika ingin membatalkan secara manual silahkan hapus table kemudian hapus pula migrate di database tabel migrations.

Kode lainnya :
Mengosongkan table
	
		DB::table('nama_tabel')->truncate();
Menabahkan data kedalam table
	
		DB::table('nama_tabel')->insert($this->data);
Menghapus satu data dalam table
	
		DB::table('nama_tabel')->where($id)->delete();
Mengupadate satu data dalam table
	
		DB::table('nama_tabel')->where($id)->update($data);
Menambahkan field atau kolom baru kedalam table
	
		Schema::table('nama_table', function (Blueprint $table) {
            $table->integer('field_baru');
        });
Read More