Cara menginstall dan mengoptimasi SourceTree

November 21, 2022 0

Cara menginstall dan mengoptimasi SourceTree

Sourcetree

 

Sebelumnya pada artikel SourceTree: Git GUI Client Free Terbaik untuk Private Repository kita telah mengetahui kelebihan dan kekurangan dari SourceTree. Sekarang saya ingin menjelaskan cara menginstall dan mongoptimasi SourceTree agar teman teman semua dan dengan mudah bekerja dengan menggunakan SourceTree. Sebenernya tidak hanya SourceTree, kalian juga bisa menggunakan GIT GUI Client yang lain yang menurut teman teman semua nyaman dalam menggunakannya. Tapi kali ini untuk teman temanku yang menggunakan SourceTree, inilah tips dan trik yang bisa kalian terapkan di komputer kalian. Langsung saja ini dia.

Cara Menginstall SourceTree

Untuk menginstall SourceTree kalian tentunya harus memiliki file installernya terlebih dahulu. Kalian bisa mendownloadnya di website resmi SourceTree. SourceTree adalah apilikasi GIT GUI Client yang gratis. Jadi kalian bisa dengan nyaman mendownloadnya.

Dan untuk cara menginstallnya tidak ada yang sulit. Cukup buka dan klik next hingga proses selesai.

Cara Mengoptimasi SourceTree

Git
Git

Jadi ini dia cara mengoptimasi SourceTree. Seperti yang dijelaskan sebelumnya pada artikel SourceTree: Git GUI Client Free Terbaik untuk Private Repository bahwa sourcetree sendiri memiliki kurangan sendiri. Salah satunya adalah proses yang panjang ketika melakukan perintah tertentu seperti pull, push dan lainnya. Untuk masalah yang satu ini ada banyak alasanya. Untuk saat ini ikuti langkah dibawah ini ya.

  1. Download dan install Git. Salah satu masalahnya adalah sourcetree memiliki git system yang diembed kedalamnya. Sehingga kita bisa melakukan perintah pull, push dan perintah lainnya tanpa menginstall software git yang asli. Sayangnya Embed Git pada sourcetree tidak secepat git aslinya.
  2. Ubah pengaturan git pada sourcetree untuk menggunakan git system yang diinstall pada komputer kalian.
  3. Click menu Tools lalu pilih Option
  4. Bila jendela Option telah terbuka maka pilih tab Git dan scrool halaman ke paling bawah.
  5. Dibagian Git version pilih System dan tekan tombol OK

Pengaturan Git Version Pada Sourcetree
Pengaturan Git Version Pada Sourcetree

Selain memilih penggunaan versi git. Ikuti juga pengaturan dibawah ini agar proses commiting berjalan lebih cepat.

Pengaturan Commit Settings Pada Sourcetree
Pengaturan Commit Settings Pada Sourcetree

Selain itu, salah satu masalah lain yang dimiliki sourcetree adalah logika merge dan diff tool yang kirang memumpuni. Jadi ada baiknya kita menggunakan aplikasi tambahan. Ada banyak jenis aplikasi merge dan diff tool ini. Ngomong ngomong Merge dan Diff Tool adalah aplikasi yang membantu kita menggabungkan code ketika ada perubahaan pada perubahan pada file yang sama, dan juga untuk membandingkan perbedaan pada file yang sama dengan versi file sebelumnya.

P4Merge Logo
P4Merge Logo

Disini saya menggunakan P4Merge yang bisa didapatkan disini. Silahkan didownload dan diinstall di komputer anda. Untuk menghubungkannya ke sourcetree buka menu Option lalu pilih tab Diff. Pada bagian External Diff/Merge Pilih P4Merge dan arahkan Commandnya pada aplikasi P4Merge dimana anda menginstallnya. Biasanya ada pada lokasi C:\Program Files\Perforce\p4merge.exe

Dan untuk membuka external diff toolnya, silahkan pilih filenya pada sourcetree lalu klik External Diff seperti gambar dibawah ini.

Pengaturan External Diff/Merge Pada Sourcetree
Pengaturan External Diff/Merge Pada Sourcetree

Baiklah sekian dari saya. Silahkan bagikan pendapat dan pertanyaan kalian dikolom komentar tentang topik kali ini. Jangan lupa sharing artikel ini bila bermanfaat untuk anda agar orang orang disekitar anda mengetahui juga. Sampai jumpa.

SourceTree: Git GUI Client Free Terbaik untuk Private Repository

November 17, 2022 0


Logo Git
GIT

GIT

Sebagai programmer yang berpengalaman, saya yakin anda sudah mengetahui apa itu git. Seperti yang kita tau git adalah salah satu sistem pengontrol veri (Version Control System) pada proyek perangkat lunak. Git ini bertugas untuk mencatat setiap perubahan pada file proyek yang dikerjakan oleh programmer seorang diri maupun dalam tim. 

Biasanya Git server yang sering digunakan oleh kebanyakan orang adalah Github. Dikarenakan gratis dan sifatnya hosting dapat diakses dimana saja. Tapi untuk sebuah perusahaan yang menjada source code mereka, biasanya mereka ingin membuat git repository sendiri (Private Repository) di server mereka agar keamanannya lebih terjamin. Dan untuk mengakses git kita bisa menggunakan git console yang sifatnya hanya text. Sedangkan yang kesulitan dalam menggunakannya bisa menggunakan Git GUI Client. 

Gambaran Flow Git System
Flow dari Git
Ada banyak sekali aplikasi Git GUI Client yang tersebar, ada gitahead, gitkraken, fork, git client dan lain lain. Tapi sebagai besar aplikasi yang bagus tidak dapat mengakses private repository secara gratis. Nah disini saya akan membagikan Git GUI Client Gratis yang menurut saya terbaik untuk Git Private Repository berdasarkan pengalaman saya. Tentunya ini bersifat subjektif dan anda dapat menerima ataupun menolaknya.

SourceTree

SourceTree adalah aplikasi Git GUI Client Terbaik menurut saya untuk Git Private Repository. Selain gratis SourceTree memiliki tampilan yang flat dan modern sesuai desain aplikasi zaman sekarang. Sebenarya juga ada aplikasi yang sejenis yaitu gitahead, fork dan lain lain. Dan fungsi aplikasi aplikasi tersebut tidak jauh berbeda. Tapi untuk tampilan, dimata saya sourcetree jauh lebih baik. Sekedar informasi tidak dibayar ya untuk mempromosikan aplikasi ini. Ini benar benar pendapat pribadi saya.

SourceTree Loading Logo
SourceTree
Walaupun saya mengatakan sourcetree adalah aplikasi Git GUI Client Terbaik. Tetap saja terdapat beberapa kekurangan yang saya rasakan. Kekurangannya adalah :

  • Aplikasi sangat lambat dalam pull dan push commit
  • Logic Diff and merge tool bawaan masih kurang dapat diandalkan dalam penggabungan code dibeberapa kasus.

Untungnya saya sudah mendapatkan solusi untuk kekurangan diatas. Dan saya akan membagikan solusinya dilain waktu.

Baiklah sekian dari saya. Silahkan bagikan pendapat kalian dikolom komentar tentang topik kali ini. Mungkin adalah aplikasi yang lain yang lebih baik dan belum saya ketahui. Tuliskan itu dikolom komentar. Jangan lupa sharing artikel ini bila bermanfaat untuk anda agar orang orang disekitar anda mengetahui juga. Sampai jumpa.

Cara Membuat CRUD menggunakan Flask API dengan model MVC + PostgreSQL + Automapping Database

Habib Syuhada September 21, 2022 0

Jika anda baru dalam hal pemrograman, anda mungkin terbiasa menulis kode dalam satu file lalu tekan tombol run dan boom selesai! Namun tidak demikian jika anda membuat aplikasi yang terorganisir dengan banyak fitur. Umumnya secara praktek adalah selalu mengikuti pola desain perangkat lunak meskipun aplikasinya kecil, di masa depan jika anda ingin menambahkan beberapa fitur maka akan lebih mudah untuk ditambahkan jika codingan anda dalam model MVC karena kode anda akan lebih terorganisir, teratur, fleksibel dan dapat digunakan kembali.

Mengapa harus menggunakan pola model MVC dipembuatan aplikasi?

Jika anda tidak mengikuti pola ini mungkin anda akan terjebak dalam beberapa jenis masalah ketika akan mengembangkan aplikasi. Seperti saya, ketika saya mulai belajar, ketika saya harus mengembangkan aplikasi dan melihat kembali codingan saya itu sangat sulit karena semuanya terdapat pada satu file yang sama. Tidak hanya itu satu perubahan kecil bisa menyebabkan masalah pada fitur yang lain karena pada satu file yang sama. Ada banyak pola desain perangkat lunak tetapi MVC memberikan ide bahwa "separation of concerns." saya akan mengikutinya di sini. "separation of concerns" adalah prinsip desain untuk memisahkan program komputer menjadi bagian-bagian yang berbeda. Setiap bagian membahas sesuatu yang terpisah, satu set informasi yang mempengaruhi kode program komputer.

Bagaimana ini akan membantu Anda?

Saya telah membuat Flask API sederhana dengan database PostgreSQL menggunakan pola desain MVC. Untuk menggunakan database PostgreSQL saya menggunakan package flask-sqlalchemy yang merupakan ORM (object-relational mapper) yang populer, yang merupakan cara untuk memetakan tabel database ke objek python. Itu membuatnya lebih mudah untuk bekerja dengan database. Sederhananya:

Arsitektur MVC membantu kita untuk mengontrol kompleksitas aplikasi dengan membaginya menjadi tiga komponen yaitu model, view dan controller

Alat dan teknologi yang digunakan adalah:

  • Python
  • Flask
  • PostgreSQL
  • Flask-sqlalchemy

File dan Directory Structure

Cara Membuat CRUD menggunakan Flask API dengan model MVC + PostgreSQL + Automapping Database
File tree struktur

Database File (database.py)

File ini berisi konfigurasi untuk database. Semua koneksi database di konfigurasikan disini. Anda dapat menambahkan variable baru dengan nama yang berbeda jika anda ingin menggunakan multi database.

#postgresql://username:password@host/dbname
DB_TEST = "postgresql://postgres:postgres@127.0.0.1/test"

Konfigurasi File (config.py)

File ini berisi konfigurasi aplikasi. Anda bisa meletakan variable apapun yang sifatnya global ataupun yang lainnya. Seperti variable database, ftp configurasi dan lain lain.

import os

# Each Flask web application contains a secret key which used to sign session cookies for protection against cookie data tampering.
SECRET_KEY = os.urandom(32)

# Grabs the folder where the script runs.
# In my case it is, "F:\DataScience_Ai\hobby_projects\mvc_project\src"
basedir = os.path.abspath(os.path.dirname(__file__))

# Enable debug mode, that will refresh the page when you make changes.
DEBUG = True

# FTP Synology Configuration
FTP_HOSTNAME = "127.0.01"
FTP_USERNAME = "root"
FTP_PASSWORD = "root"
FTP_PORT     = 22
FTP_LOCAL_DIR     = basedir + "\\files"
FTP_SERVER_DIR     = "/test_python"

Model File (db_test.py)

Model adalah inti dari aplikasi. Ini akan menentukan data yang ditransfer antara controller dan logika bisnis lainnya. Hanya model yang memiliki akses langsung ke database. Model mengakses database secara langsung dan data tersebut digunakan oleh controllers. Pada Kasus ini saya menggunakan fitur automapping karena saya sudah memiliki database dan didalamnya sudah terdapat table beserta datanya.

from sqlalchemy.ext.automap import automap_base
from sqlalchemy.orm import Session
from sqlalchemy import create_engine
import database

Base = automap_base()

# engine, suppose it has two tables 'user' and 'address' set up
engine = create_engine(database.DB_PCMSV3)

# reflect the tables
Base.prepare(engine, reflect=True)

# mapped classes are now created with names by default
# matching that of the table name.
User = Base.classes.table_user

# attrs = vars(User)
# print(', '.join("%s: %s" % item for item in attrs.items()))

session_test = Session(engine)

Bisa dilihar bagian variable User. Pada baris tersebut saya menyimpan strukture table table_user kedalam variable User.

Service File (user_service.py)

Anda dapat menyebutnya sebagai lapisan tambahan di atas controllers. Akan sangat membantu ketika aplikasi Anda berkembang dan lebih banyak fitur ditambahkan ke dalamnya, ini adalah praktik yang lebih baik untuk memisahkan logika bisnis dari aplikasi. Services menambahkan lapisan abstraksi tambahan antara aplikasi dan logika bisnis. Ini memiliki logika bisnis inti. Services biasanya berisi query yang digunakan untuk manajemen data di database. function pada service dapatberulang kali dipanggil di controllers.

from models.db_test import session_test, User
from sqlalchemy import select, update, delete, insert, and_

def user_list_process(where = None):
  statement = select(User)
  if where != None:
    statement = statement.where(and_(*where))
  
  datadb = session_test.execute(statement).scalars().all()
  
  result = []
  for row in datadb:
    tmp = {}
    for attribute, value in row.__dict__.items():
      # print(attribute, '=', value)
      if attribute != '_sa_instance_state':
        tmp[attribute] = value
    # print(tmp)
    result.append(tmp)
  return result

def user_insert_process(value):
  statement = insert(User)
  statement = statement.values(**value)

  session_test.execute(statement)
  session_test.commit()

def user_update_process(value, where):
  statement = update(User)
  statement = statement.where(and_(*where))
  statement = statement.values(**value)

  session_test.execute(statement)
  session_test.commit()

def user_delete_process(where):
  statement = delete(User)
  statement = statement.where(and_(*where))

  session.execute(statement)
  session.commit()

Controllers File (userController.py)

Kontroler seperti perantara antara view dan model. Mereka mengambil input dan berbicara langsung dengan model yang akan berkomunikasi dengan database. Di sini Anda hanya memanggil logika bisnis dari services. Controller tidak berkomunikasi langsung dengan database ada model antara database dan controller.


from flask import request
from models.portal import User
import services.user_service as user_service
import datetime, json

def user_list():
  user_list = user_service.user_list_process()
  return {
    "user_list": user_list
  }

def user_insert_process():
  data = {
    'name': request.form['name'],
    'gender': request.form['gender'],
    'birth_date': request.form['birth_date'],
  }
  user_service.user_insert_process(data)

  return "Successful"

def user_update_process():
  data = {
    'name': request.form['name'],
    'gender': request.form['gender'],
    'birth_date': request.form['birth_date'],
  }
  user_service.user_update_process(data, [
    User.id_user == request.form['id_user']
  ])
  
  return "Successful"

def user_delete_process(id_user):
  user_service.user_delete_process([
    User.id_user == id_user
  ])
  
  return "Successful"

Routes File (user_bp.py)

Ketika pengguna mengunjungi URL, dia akan diarahkan ke halaman tertentu. Router adalah alamat di mana pengguna akan diarahkan. Misalnya, jika pengguna ingin mengunjungi halaman login maka dia akan mengetik http://localhost:5000/login dibrowsernya. Pada artikel ini kita menggunakan flask API. Anda juga dapat menggunakan FastApi ataupun yang lainnnya.Untuk penggunaan rute yang lebih efisien, kami menggunakan blueprint flask.

from flask import Blueprint
import controllers.userController as userController
user_bp = Blueprint('user_bp', __name__)

user_bp.route('/user_list', methods=['GET'])(userController.user_list) 
user_bp.route('/user_insert_process', methods=['POST'])(user_insert_process)  
user_bp.route('/user_update_process', methods = ['PATCH'])(user_update_process)
user_bp.route('/user_delete_process/<int:id_user>', methods = ['DELETE'])(user_delete_process)

App File (app.py)

Ini adalah file utama aplikasi di flask API. Ini memiliki modul/file yang telah kita buat dan kemudian memanggilnya di sini. Anda harus mendaftarkan blueprint route disini. Dan terakhir menjalankan aplikasi flask API.

from flask import Blueprint
from flask import Flask
from routes.user_bp import user_bp 

import os
 
from flask_cors import CORS 
 
app = Flask(__name__) 
CORS(app) 
app.config.from_object('config') 

app.register_blueprint(user_bp, url_prefix='/user') 
 
if __name__ == '__main__':  # Running the app 
  app.run(host='0.0.0.0', port=5000, debug=True)

Menjalankan Aplikasi Flask API

Setelah semua file dibuat, maka langkah terakhir adalah menjalankannya. Banyak cara untuk menjalankan flask api, mulai dari menggunakan docker, flask run, dan lain lain. Disini saya menggunakan cara yang paling mudah untuk dilakukan. Pertama buka command promt di komputer anda. Lalu atur direktori nya ke direktori aplikasi api yang sudah dibuat, yang berisi app.py. Lalu jalankan perintah py app.py. Maka akan muncul tampilan seperti dibawah ini.

Cara Membuat CRUD menggunakan Flask API dengan model MVC + PostgreSQL + Automapping Database
Hasil perintah app.py

Selamat anda sudah selesai membuat CRUD menggunakan FLASK API. Anda bisa mencobanya langsung menggunakan POSTMAN ataupun aplikasi lainnya untuk mencoba API yang sudah anda buat.

Terimakasih telah membaca artikel ini sampai akhir. Sekarang Anda sudah tahu cara membuat flask API dengan struktur MVC. Silakan terapkan dan buat API menarik dengan cara ini. Tolong share ke teman teman anda jika artikel ini bermanfaat untuk anda. Silahkan memberikan komentar tentang pendapat anda ataupun ada yang ini ditanyakan.

7 Hal CSS Basic yang bisa membuatmu menjadi Fronted Master

September 19, 2022 0

Orang-orang memperlakukan pengembangan frontend seperti binatang mitos yang hanya bisa dijinakkan oleh sedikit orang. Orang yang menguasai frontend sangatlah sedikit karena saking sulitnya pengembangan frontend. Tapi kenyataannya, itu tidak sesulit yang anda dipikirkan. Anda hanya perlu menguasai beberapa hal ini dan anda akan menjadi Frontend Master dalam waktu singkat. Seperti kata pepatah terkenal:

Seorang master bukanlah seseorang yang berlatih 10.000 gerakan berbeda, dia adalah seseorang yang berlatih 1 gerakan 10.000 kali.

Tata letak menggunakan Flexbox & Grid

Perbedaan Flexbox dan Grid Layout
Perbedaan Flexbox dan Grid Layout

Flexbox dan Grid adalah dua alat CSS paling efektif yang dapat anda gunakan untuk membuat tata letak. Mungkin sedikit sulit pada awalnya, tetapi begitu anda menguasainya, itu akan menjadi alat yang sangat membantu untuk anda.

Menggunakan Media Queries untuk Perangkat yang Berbeda

Beda perangkat, berbeda juga tampilannya
Beda perangkat, berbeda juga tampilannya

Kita tidak pernah tahu perangkat yang akan digunakan pengunjung saat membuka situs web anda. Jadi, sangat penting untuk memastikan bahwa situs web anda terlihat responsif pada perangkat dari segala bentuk dan ukuran. Media Query memecahkan masalah tersebut dengan memungkinkan developer untuk menentukan style untuk setiap ukuran layar.

Memanfaatkan Pseudo-classes & Pseudo-elements

First Letter merupakan contoh dari Pseudo-elements
First Letter merupakan contoh dari Pseudo-elements

Pseudo-classes dan Pseudo-elements adalah CSS selector yang memungkinkan anda untuk memilih elemen ketika kondisi tertentu telah terpenuhi atau bagian tertentu dari suatu elemen. Ini dapat digunakan untuk menambahkan interaktivitas, spesifik desain dan lainnya. Seperti memperbarui style tombol saat diarahkan(hover) atau ditekan(press), memberikan style huruf pertama paragraf secara berbeda dan lain-lain.

Menambahkan Animasi

See the Pen Super Simple CSS Spinner by Thomas Mandelid (@mandelid) on CodePen.

Ingin membuat situs anda terihat lebih bagus dan menonjol? Animasi adalah alat yang hebat dan tepat untuk mencapai hal itu! Ini bisa sesederhana menambahkan transisi properti ke elemen yang digunakan dalam kombinasi dengan pseudo-classes atau sesuatu yang lebih kompleks seperti membuat animasi khusus menggunakan keyframes.

Shadow = Life

Perbedaan Dengan atau Tampa Bayangan
Perbedaan Dengan atau Tampa Bayangan

Shadow/banyangan adalah cara yang bagus untuk menambahkan kedalaman ke situs web anda sehingga elemen terlihat menonjol. CSS memungkinkan anda untuk menambahkan berbagai jenis bayangan, yaitu box-shadow, text-shadow, dan drop-shadow. Kita harus mengetahui dimana dan kapan waktu yang tepat untuk menggunakan bayangan pada elemen diwebsite. Tetapi warnanya tidak harus hitam.

Posisi Elemen

Jenis jenis posisi elemen
Jenis jenis posisi elemen

Cara memposisikan elemen sangat penting untuk pengembangan frontend. Dengan tidak mengetahui bagaimana posisi elemen static , relative , absolute , fixed , dan sticky, anda  akan membatasi kemampuan anda secara drastis.

Mengatur border-radius

Properti border-radius ini memungkinkan pengembang untuk membuat UI yang tidak terlihat kaku. Ini adalah alat yang hebat untuk mengembangkan UX yang sangat profesional.

Pengenalan dan Instalasi ReactJS - Belajar ReactJS

Habib Syuhada March 29, 2019 0
Logo React
Logo React

Pengenalan ReactJS

ReactJS adalah suatu framework yang sedang naik daun belakangan ini. ReactJS framework yang cukup populer dan framework ini ternyata telah dipakai dan awalnya dari Facebook loh. Kelebihan secara garis barisnya adalah bahwa framework ini mendukung perubahan dan pergantian web maupun database secara realtime. Munkin untuk lebih detailnya kalian bisa cek sendiri di web tetangga. Sudah banyak yang menjelaskan hal tersebut.

By the way, artikel tentang react ini bertujuan untuk menjadi catatan saya pribadi saya selama saya belajar tentang reactjs. Jadi buat kalian yang membaca ini, bila terdapat kesalahan. mohon dimaklumi. Masih belajar soalnya.

Persiapan

Jadi sebelum memulai belajar ReactJS, ada beberapa aplikasi yang harus anda miliki. Text editor dan web server. Yang paling sering digunakan dalam Pembangunan ReactJS adalah NodeJS sebagai servernya dan Visual Code sebagai Text editornya. Kalo pakai aplikaso lain bisa ga? bisa. Tergantung kesesuaian kalian. Tapi dua hal ini yang biasa saya pakai.



Selain dari segi software, dari segi skill kalian juga harus menguasai dasar-dasar pemrograman web. Bahasa pemrograman yang setidaknya kalian harus tau adalah HTML, CSS, JS, dan PHP.

Install NodeJS

Install NodeJS yang telah kalian download sebelumnya. Kalau aku boleh sarankan, pilih versi yang LTS. Kenapa? Karena tertulis Recomended for Most User :)

 Membuat Projek ReactJS Pertama

Setelah install nodejs, buka aplikasi NodeJS Command Promt. Buka dengan cara Run as Administrator. Setelah itu alihkan direktori ke tempat penyimpanan yang kalian inginkan dengan perintah cd. misalnya bila kalian ingin menyimpan file ReactJS di C:\ maka ikuti seperti pada gambar dibawah ini
Ini contoh jika ingin menggunakan peritah cd.
Ini contoh jika ingin menggunakan peritah cd.
By the way, saya tidak menaruhnya di C:\ tapi saya membuat folder baru namanya "react-app" dan saya menempatkan file reactjs saya disana.

Bila anda telah milih direktori penyimpan, sekarang kita bisa install react pada folder tersebut dengan bantuan package create-react-app. Pertama install dulu packagenya dengan perintah dibawah ini.
npm install -g create-react-app
Setelah proses instalasi package create-react-app selesai, kita bisa langsung memulai membuat aplikasi react. Jalankan perintah dibawah ini
create-react-app my-app
Akan mucul tampilan seperti pada gambar ini.
Akan mucul tampilan seperti pada gambar ini.
Proses ini membutuhkan waktu sesuai dengan kecepatan internetmu. Jadi pastikan internet kamu lancar dan cepat. Sehingga proses ini tidak terlalu lama. Bila proses ini selesai maka akan muncul sepert gambar dibawah ini.
Tampilan apa bila success installasi reactjs
Tampilan apa bila success installasi reactjs
Bila sudah muncul tampilan seperti diatas, berarti anda telah melakukannya dengan benar. Selanjutnya perhaitkan di bagian bawahnya. Tertulis saran apa yang dilakukan selanjutnya. Letaknya dibawah kata "We suggest that you begin by typing :"
ikuti itu saja untuk saat ini. Jadinya seperti di gambar ini
Setelah kalian ikuti sarannya, jika muncul tampilan seperti ini sukses untuk dijalankan
Setelah kalian ikuti sarannya, jika muncul tampilan seperti ini sukses untuk dijalankan
Bila proses compile berhasil maka akan secara automatis membuka halaman web/app react di browser. Bila tidak kita dapat membukanya sendiri dengan alamat yang tertera di command promt.
Tampilan awal reactjs yang telah dibuat
Tampilan awal reactjs yang telah dibuat
Ini adalah halaman Welcome to React, jika sudah tampil halaman seperti ini maka react projek pertama anda telah berhasil :)

Penutup

Sebenarnya ada banyak cara untuk menginstall reactjs, tapi bagi yang pertama kali mengugnakan react js cara ini adalah cara yang paling mudah.

Tombol Balas Komentar Bermasalah? Cara Memperbaiki Tombol Balas atau Reply Komentar Blogger

Habib Syuhada March 16, 2019 0

Apa yang terjadi dengan Tombol Balas / Reply Komentar di Blogger?

Tombol Replynya kok gak jalan? Gimana nih?
Tombol Replynya kok gak jalan? Gimana nih?

Pernah ganti template blog dari luar yang bukan bawaan dari bloggernya itu sendiri karena lebih cantik? Tapi setelah diganti baru menyadari jika tombol Balas atau Reply di kolom komentar tidak berjalan dengan semestinya? Apa alasannya? Bagaimana cara mengatasinya?

Jadi saya pernah mengubah-ubah template blog saya sendiri untuk menjadikan tampilan yang lebih baik. Misalnya seperti template yang saya pakai ini. Template ini sebenarnya tombol reply tidak dapat berjalan semestinya sebelum saya otak atik templatenya. Ternyata blogger telah mengupdate sistem komentar diblogger dan sedangkan template saya masih pakai sistem yang lama. Maka dari itu saya melakukan research dan membagikannya kepada kalian.

Cara 1 : Matikan Kolom Komentar

Hapus Kolom Komentar Blog. Jadi gak ada error deh.
Hapus Kolom Komentar Blog. Jadi gak ada error deh.

Buat kalian yang GAK MAU RIBET tapi sangat ingin menggunakan template tersebut cara ini yang paling tepat terutama buat kalian yang blognya sepi yang komen. Caranya mudah sekali, Buka Blogger > Setelan > Postingan, Komentar dan Berbagi  > Komentar. Lalu pada Lokasi Komentar pilih Sembunyikan.

Cara 2 : Gunakan Kolom Komentar dari Aplikasi Lain

Bisa embed komentar Facebook, Disqus, Google+, dan sebagainya.
Bisa embed komentar Facebook, Disqus, Google+, dan sebagainya.

Selanjut, yaitu dengan menggunakan kolom komentar dari aplikasi lain. Kalian bisa mengganti kolom komentar dengan aplikasi lain seperti Facebook, Google+, dan yang paling sering dipakai oleh sobat blogger yang lain adalah Disqus Comment. Jadi seperti Embed gitu. Ini pas kali bila kalian kurang mengerti script dan koding. Untuk caranya bisa di cek dilink berikut.
Baca Juga : Cara Mengganti Komentar denga Aplikasi Lain

Cara 3 : Ikuti Manual dari Pembuat Template yang Dikenakan

Biasanya sih dari creatornya bakal ngasih tutorial buat selesaikan masalah ini. Kalo kamu nanya ya ke creatornya.
Biasanya sih dari creatornya bakal ngasih tutorial buat selesaikan masalah ini. Kalo kamu nanya ya ke creatornya.

Jika kalian menggunakan template orang lain, kalian bisa menanyakan kepada pembuatnya tentang masalah ini. Pengalaman saya, saya pernah menggunakan template dari Arlina Desain dan tombol balas komentar tidak dapat berjalan. Banyak yang menanyakan masalah ini, dan mbak arlina mempostingkan cara mengatasi hal terbebut. Contohnya seperti berikut
Hanya salah satunya. Kalian bisa menanyakan hal tersebut kepada creatornya.

Cara 4 : Mengembalikan Script Komentar ke Script Default Bawaan dari Blogger

Balikin ke awal lagi kolom komentarnya ke tampilan dan proses defaultnya.
Balikin ke awal lagi kolom komentarnya ke tampilan dan proses defaultnya.

Jadi, ketika saya mencoba cara ke 3, tombol reply dapat berjalan seperti biasa. Akan tetapi, hasil komentar dari tombol reply tersebut akan ditampilkan sebagai komentar utama. Jadi seperti tambah komentar baru.
Maka dari itu saya memutuskan untuk mengembalikan template ke template blogger default tapi hanya bagian kolom komentarnya aja. Walupun tidak sebagus template sebelumnya, yang terpenting adalah Its Work. Dan akhirnya saya mendapatkan caranya. Ini dia.

1. Cari kode dibawah ini
<b:include data='post' name='comments'/>

2. Lalu ganti dengan kode ini
<b:include data='post' name='threaded_comments'/>

3.Lalu cari kode dibawah ini
<b:includable id='comments' var='post'>...</b:includable>

4. Ganti dengan kode dibawah ini.
<b:includable id='comments' var='post'>
  <section expr:class='&quot;comments&quot; + (data:post.embedCommentForm ? &quot; embed&quot; : &quot;&quot;)' expr:data-num-comments='data:post.numberOfComments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

      <b:include name='commentsTitle'/>

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <b:include cond='data:post.comments' data='post.comments' name='commentList'/>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <div class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
              <data:messages.oldest/>
            </a>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
              <data:messages.older/>
            </a>
          </b:if>

          <span class='comment-range-text'>
            <data:post.commentRangeText/>
          </span>

          <b:if cond='data:post.hasNewerLinks'>
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
              <data:messages.newer/>
            </a>
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
              <data:messages.newest/>
            </a>
          </b:if>
        </div>
      </b:if>

      <div class='footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='commentForm'/>
            <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
          <b:else/>
          <b:if cond='data:post.allowComments'>
            <b:include data='post' name='addComments'/>
          </b:if>
        </b:if>
      </div>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>
  </section>
</b:includable>
Copy to ClipBoard


5. Berdoa dan klik save. Lihat hasilnya.

Jika anda tidak menemukan kode di langkah pertama, maka cara diatas tidak ada gunanya buat anda. Jadi tawakal aja.
Mungkin setelah ngelakuin cara ke empat ini. Kamu pasti merasa kurang pas aja, karena tampilan bawaan dari bloggernya sangat simple banget. Tapi kamu jangan hawatir, jika kalian ngerti tentang apa itu HTML dan CSS kalian bisa ubah tampilan kolom komentarnya sesuai denga yang kamu inginkan

Cara Membuat Syntax Highlighter Berwarna dengan Menggunakan Google Prettify di Blogger

Habib Syuhada July 18, 2017 0

Apa itu Syntax Highlighter?

Syntax Highlighter adalah sebutan untuk suatu cara dimana kita membuat tampilan kode menjadi lebih cantik dan menarik dengan memberikan warna yang berbeda-beda kepada setiap jenis syntax. Untuk lebih jelasnya, anda dapat membandingkan kedua kode dibawah ini.

Yang pertama adalah Syntax tanpa Highlighter, maka tampilannya akan terlihat seperti ini.

<html>
    <head>
        <title>Contoh kode tanpa Syntax Highlighter</title>
        <style>
            body{
                color: blue;
            }
            </style>
    </head>
    <body>
        <p class='tanya'>Siapa namamu?</p>
        <input type='text' name='jawab'>
        <!-- Script Tanpa Highlighter -->
    </body>
</html>
Sedangkan yang kedua adalah Syntax dengan Highlighter,maka akan terlihat seperti ini.
<html>
    <head>
        <title>Contoh kode dengan Syntax Highlighter</title>
        <style>
            body{
                color: blue;
            }
        </style>
    </head>
    <body>
        <p class='tanya'>Siapa namamu?</p>
        <input type='text' name='jawab'>
        <!-- Script dengan Highlighter -->
    </body>
</html>
Dari kedua syntax diatas saya yakin anda sudah mengerti kegunaan SyntaxHighlighter. Disini saya menggunakan Google Prettyfy. Sebebarnya masih ada banyak jenis SyntaxHighlighter seperti Alex Gorbatchev's SyntaxHighlighter dan sebagainya. Saya menggunakan Google Prettify karena mudah dikostumisasi dan dapat mengatasi masalah HTTPS dan HTTP. Saya telah banyak mencoba jenis-jenis SyntaxHiglighter tetapi tidak ada yang bisa berjalan sesuai dengan semestinya. Kemungkinan hal ini dikarenakan saya menggunakan fitur HTTPS di Blogger (Dugaan saya). Hanya Prettify yang bisa berjalan pada blog ini.


Cara Pemasangan

Untuk memasang Google Prettfy ini sangatlah mudah.
Pertama, masuklah ke dasboard, pilih menu Tema, tekan tombol Edit HTML
Cara Membuat Syntax Highlighter Berwarna dengan Menggunakan Google Prettify di Blogger
Untuk Mengedit hmtl pilih menu Template.
Kedua, copy script dibawah ini dan letakan tepat diatas </body> Hal ini dilakukan supaya tidak memblokir proses load konten utama. Bila script tidak berjalan maka letakan di atas </head>.
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
Copy to ClipBoard

Ketiga, salin kode dibawah ini dan letakan diatas kode ]]></b:skin>.
pre .str, code .str { color: #65B042; } /* string  - hijau */
pre .kwd, code .kwd { color: #E28964; } /* keyword - kuning gelap */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - abu-abu  */
pre .typ, code .typ { color: #bdb76b; } /* type - kuning  */
pre .lit, code .lit { color: #3387CC; } /* literal - biru */
pre .pun, code .pun { color: #bdb76b; } /* punctuation - kuning  */
pre .pln, code .pln { color: #fff; } /* plaintext - putih */
pre .tag, code .tag { color: #77bdff; } /* warna tag html/xml    - biru langit */
pre .atn, code .atn { color: #dd7700; } /* warna nama attribute html/xml  - oranye */
pre .atv, code .atv { color: #65B042; } /* warna nilai attribute html/xml - hijau */
pre .dec, code .dec { color: #3387CC; } /* decimal - biru */

pre.prettyprint, code.prettyprint {
    background-color: #2f3741; /* warna background */
    border: none!important; border-left: 4px solid #29abe2!important; /* warna garis biru di kiri kode */
}

code.prettyprint {
    padding-left: 8px!important;
    padding-right: 8px!important;
}
 
pre.prettyprint {
    overflow: auto;/* 'overflow: auto;' untuk menambah scroll saat panjang baris kelebihan, 'white-space: pre-wrap;' untuk warp text; */ 
    margin: 1em auto!important;
    padding: 1em!important;
}
 
/* class=linenums pada tag pre untuk memberi nomor baris */
ol.linenums { margin-top: 0!important; margin-bottom: 0!important; color: #AEAEAE!important; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8 { list-style-type: decimal!important; background: #2f3741!important}
 
/* Ubah warna dibawah untuk membuat tampilan belang-belang */
li.L1,li.L3,li.L5,li.L7,li.L9 {
    background: #2f3741!important;
}
Copy to ClipBoard
Keempat, Simpan Tema.


Cara Penggunaan

Pertama, siapkan kode yang akan anda tampilkan. Misalnya saya akan menampilkan syntax seperti ini :
<html>
    <body>
        <p>Membuat Syntax Highlighter bersama </p>
        <a href='skybamboox.blogspot.com'>SkyBamboox</a>
    </body>
</html>
Kedua, Syntax harus diparseskan terlebih dahulu sebelum dimasukan kedalam post diblog. Karena agar syntax tersebut tidak dibaca sebagai perintah oleh system melainkan sebagai text biasa. Untuk memparsekan symtax, anda dapat mengunjungi web berikut, cukup pastekan syntax pada kolom yang telah disediakan, lalu tekan Convert.
Parse Tool
Contoh hasil parse akan terlihat seperti ini:
&lt;html&gt;
    &lt;body&gt;
        &lt;p&gt;Membuat Syntax Highlighter bersama &lt;/p&gt;
        &lt;a href='skybamboox.blogspot.com'&gt;SkyBamboox&lt;/a&gt;
    &lt;/body&gt;
&lt;/html&gt;
Ketiga, masuk ke blog dan tulislah post baru/ edit post lama. Pilih mode HTML saat menulis post.
Cara Membuat Syntax Highlighter Berwarna dengan Menggunakan Google Prettify di Blogger
Mode HTML berada di samping Mode Compose saat menulis post
Keempat, Masukan kode hasil parse ke dalam post dengan format
<pre class="prettyprint">...Hasil Parse...</pre>
atau
<code class="prettyprint">...Hasil Parse...</code>
Jadinya seperti ini :
<pre class="prettyprint">
&lt;html&gt;
    &lt;body&gt;
        &lt;p&gt;Membuat Syntax Highlighter bersama &lt;/p&gt;
        &lt;a href='skybamboox.blogspot.com'&gt;SkyBamboox&lt;/a&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
Kelima, Publikasikan dan lihat hasilnya.


Pengaturan Lanjutan

Untuk memberikan nomor pada setiap baris, tambahkan class "linenums", jadinya seperti ini :
<pre class="prettyprint linenums">...Hasil Parse...</pre>
Hasilnya akan terlihat seperti ini :
Kata Pertama
Kata Kedua
Kata Ketiga

Anda juga dapat mengganti warna tulisan atau background sesuai dengan keinginan anda.


Penutup

Bila ada yang ingin ditanyakan atau hal lainnya anda dapat menulisnya dikolom komentar. Sekian terimakasih.