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 Maret 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 Maret 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 Juli 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. 

Cara Agar Artikel Postingan Anda tidak Dicopy Paste Oleh Orang Lain

Habib Syuhada Juni 04, 2017 0

Anti Copy-Paste Artikel

Pernahkah anda mengalami pengalaman dimana artikel yang telah anda buat dengan susah payah di salin (copy-paste) oleh orang lain yang tidak bertanggungjawab dan seenaknya meletakan artikel anda di blog/websitenya tanpa izin dari pemilik asli artikel tersebut. Rasanya pasti sangat sakit dan marah melihatnya. Terutama artikel yang salin adalah artikel terbaik anda. Dan setelah itu anda merasa tidak ingin hal yang serupa terjadi lagi dimasa yang akan datang.Maka andapun akan mencari cara agar artikel anda tidak disalin seenaknya lagi oleh orang lain. Jadi, kali ini SkyBamboox akan memberikan beberapa Cara Agar Artikel Postingan Anda tidak Dicopy Paste Oleh Orang Lain.
Stop Copy Paste. Stop PLagiarism.
Hentikan Kegiatan Plagiat. Gunakan kreativitasmu.


Cara Menyalin/Copy-Paste Artikel Orang Lain.

Sebelum mengatasi masalah "copy-paste" ini, kita harus tahu cara bagaimana orang lain menyalin artikel kita. Tapi saya harap anda tidak menyalahgunakan informasi ini. Dan juga kami tidak bertanggung jawab atas tindakan penyalahgunaan informasi ini. Baiklah, langsung saja bahwa ada dua cara untuik menyalin artikel orang lain.

Menyalin Artikel Orang Lain secara Automatis Menggunakan Feed

Apa itu feed? Feed itu dapat digunakan untuk menampilkan informasi suatu blog. Bagi anda yang pernah berlangganan pada blog tertentu lewat email, fitur itu juga menggunakan feed. Anda dapat melihat Feed anda dengan membuka alamat :
alamatbloganda.blogspot.com/feeds/posts/default
atau :
 alamatbloganda.blogspot.com/feeds/posts/default?alt=rss
Singkat cerita, si pelaku memiliki tools yang bisa menyalin semua postmu dari Feed, Sehingga setiap anda mempulish post baru, tools ini akan mengambil post tersebut dari Feed dan mempublishkannya di blog si pelaku.

Menyalin Artikel Secara Manual 

Untuk cara yang satu ini, sipelaku menyalin artikel dengan memblok semua artikel lalu menmcopy dan mempastekannya di postnya secara manual. Seperti saat anda sekolah dulu, mengerjakan tugas dengan mencari jawabnya di google, lalu copy pastekan ke word dan langsung print. Kira-kira seperti itulah caranya.

Lalu, Bagaimana Cara Agar Artikel Postingan Anda tidak Dicopy Paste Oleh Orang Lain?

Setelah anda tahu bagaimana cara si pelaku menyalin artikel anda, saatnya anda melakukan pencegahan. Untuk mencegah masalah ini, anda dapat melakukan banyak cara sesuai dengan cara yang dipakai oleh si pelaku sesuai yang telah sampaikan diatas.

Solusi Pertama : Mengatur Feed pada Blog

Seperti yang anda ketahui, dengan adanya feed para pelaku dapat dengan mudahnya menyalin artikel anda.Tetapi dengan melakukan sedikit pengaturan pada feed, anda dapat mencegah hal seperti ini terjadi. Terutama untuk blogger. Langsung saja caranya adalah...

Masuk ke dasboard blog anda dan pilih menu Setelan lalu Lainnya.
Cara Agar Artikel tidak Dicopy Paste dengan Melakukan Pengaturan Feed
Pilih Menu Setelan, lalu Lainnya. Untuk mengatur Feed pada Blogger
Lalu pada bagian Umpan Situs. Ubahlah Izinkan Umpan Situs? dari penuh menjadi singkat. 
Cara Agar Artikel tidak Dicopy Paste dengan Melakukan Pengaturan Feed
Ubah dari Penuh Menjadi Singkat.
Dengan mengubahnya menjadi singkat, para pelaku tidak akan menyalin artikel anda secara lengkap. Tetapi sebenarnya ini merupakan hal yang kurang baik bagi anda yang memiliki pengunjung yang berlangganan lewat email. Mereka hanya akan menerima sebagian dari keseluruhan artikel anda.

Ada yang harus anda ketahui, bahwa saya tidak menyarankan anda untuk merubahnya menjadi Tidak Satupun karena feed ini ternyata memiliki hubungan dengan beberapa script pada blog anda(Jika ada) yang membuat blog anda akan berjalan kurang normal. Jadi saya benar-benar tidak menyarankan untuk memlih pilihan tersebut.

Solusi Kedua : Memasang Script CSS Anti Copy Paste pada Bagian Tertentu

Selanjutnya untuk si pelaku yang menyalin artikel anda secara manual. Hal ini dapat dicegah dengan memasang Kode CSS pada template anda. Kode ini berfungsi untuk mencegah para pengunjung memblok tulisan artikel anda. Misalnya seperti pada blog ini, anda tidak dapat memblok tulisan pada setiap paragraf. Walaupun begitu masih ada beberapa bagian yang bisa dapat diblok seperti bagian dibawah ini.
Bagian ini dapat anda blok dan dapat juga dicopy.
Sekarang anda telah mengerti cara kerja Script ini. Langsung saja caranya adalah

Pertama Pilih menu Template dan plih Edit HTML.
Memasang Script CSS Anti Copy Paste pada Bagian Tertentu
Untuk Mengedit hmtl pilih menu Template.
Cari kode ]]></b:skin>
Untuk mempermudah gunakan fitur FIND Ctrl+F
]]></b:skin>

Lalu letakan script ini diatas kode ]]></b:skin>
.post-outer {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-ms-user-select:none;
-moz-user-select:none;
}

.post blockquote, .post pre, .post code{
  -webkit-touch-callout:text;
  -webkit-user-select:text;
  -khtml-user-select:text;
  -ms-user-select:text;
}
Copy to ClipBoard
Jadinya seperti ini.
Memasang Script CSS Anti Copy Paste pada Bagian Tertentu
Tambahkan Script diatas kode ]]></b:skin>. Gunakan Ctrl+F untuk memudahkan pencarian.

Belajar HTML&CSS Dasar 1 : Software Pendukung Berserta Caranya

Habib Syuhada Juni 04, 2017 0
Bagi anda yang ingin belajar membuat website tapi masih pemula, saya yakin anda bingung harus mulai darimana pada awalnya. Menurut saya, yang perlu anda lakukan pertamakali adalah menyiapkan alat-alat (software) yang digunakan untuk membuat website. Dibawah ini ada beberapa software yang saya rekomendasikan untuk anda gunakan.

Notepad++

Yang pertama adalah Notepad++. Notepad++ merupakan aplikasi text editor yang sering digunakan untuk membuat serangkaian kode dalam berbegai jenis bahasa pemrograman. Jadi, notepad++ ini akan membantu anda dalam mengoding(menulis kode) nantinya. Sebenarnya anda bisa saja membuatnnya menggunakan Notepad biasa yang merupakan bawaan windows atau semacamnya. Tetapi dengan bantuan Notepad++, membuat web akan terasa lebih mudah dan cepat.
Belajar HTML&CSS Dasar 1 : Software Pendukung Berserta Caranya
Contoh Tampilan Notepad++

Untuk kelebihan Notepad++ dari text editor lainnya adalah:

  • Mendukung berbagai bahasa pemrograman termasuk HTML, CSS, PHP, SQL, JS, dan lainnya.
  • Setiap type syntax terlihat lebih jelas karena ditulis dengan warna yang berbeda-beda.
  • Memiliki fitur Tab seperti Web Browser
  • Memiliki fitur autocomplete, dimana saat anda mengetik tanda "(" maka akan secara automatis tanda ")" akan muncul. Tidak hanya tanda kurung, tanda kutip, kurung siku juga bisa.
  • Gratis
  • Mudah dalam mengatur konfigurasinya
  • Banyak addon yang tersedia
Anda dapat mendapatkan software ini secara gratis di web aslinya.

Xampp

Yang kedua adalah Xampp. Xampp berfungsi untuk menampilkan website yang anda buat dengan semestinya. Terkadang dalam menampilkan web yang anda buat, terdapat keanehan karena tampilan tidak sesuai dengan apa yang anda tulis. Dengan XAMPP ini masalah tersebut dapat teratasi. Untuk lebih lanjut, anda dapat surfing di internet karena banyak web/blog yang telah menjelaskan tentang XAMPP ini.
Belajar HTML&CSS Dasar 1 : Software Pendukung Berserta Caranya
Tampilan Xampp Control Panel
Anda dapat mendapatkan XAMPP secara gratis di web officialnya.
Untuk saat ini, anda tak perlu ambil pusing. Yang penting anda harus punya dua software diatas dan andapun bisa mulai belajar untuk membuat web. Untuk cara penggunaannya akan saya jelaskan nanti.

Selain kedua software diatas, saya juga merekomendasikan beberapa web yang akan membantu anda belajar untuk membuat web.

W3School

Situs ini adalah perpustakaannya bahasa pemrograman web, mirip seperti kamus. Isinya terdapat syntax berbagai bahasa pemrograman lengkap dengan cara penggunaannya. Jadi apabila anda lupa atau tidak tau cara pengguanan suatu syntax, anda dapat melihatnya disitus ini. Situs ini bisa anda gunakan sebagai referensi nantinya.
Situs : W3schools

Codecademy

Codecademy adalah sebuah aplikasi web yang berfungsi untuk membantu kita dalam mempelajari bahasa pemrograman. Anda dapat belajar di web ini langkah perlangkah. Sayangnya anda harus mengupgrade akun anda ke akun pro untuk menikmati semua fitur yang ada.
Situs : Codecademy

StackOverflow

StackOverflow adalah sebuah forum atau komunitas berbasis web yang beranggotakan para programmer. Biasanya jika saya mengalami kesulitan dalam pemrograman, saya akan tanyakan di situs ini. Jadi, nantinya programmer lain akan menjawab dan memberikan solusi terhadap masalah yang saya tanyakan.
Situs : StackOverflow

Kesimpulan

Jadi kedua software diatas harus anda miliki untuk belajar membuat web. Karena untuk tutorial selanjutnya kita akan menggunakan kedua software tersebut, Xampp dan Notepad++. Sambil menunggu tutorial selanjutnya, silahkan anda buka ketiga website yang telah saya sarankan.

Omong-omong saya juga sedang belajar bahasa pemrograman web. Karena dikampus hanya diajarkan dasar-dasarnya saja. Jadi saya belajar secara otodidak untuk bahasa pemrograman web lanjut. Jadi kita sama-sama belajar disini.

Apabila ada pertanyaan atau pendapat seputar topik yang dibahas diatas, silahkan ditulis dikolom komentar. Insyaallah saya akan menjawab secepatnya. Terimakasih....

Harus Mulai Darimana Jikalau Mau Menjadi Web Development

Habib Syuhada Maret 24, 2017 0

Web Development

Saya yakin anda sering atau setidaknya pernah mendengar kata ini. Web Development adalah seseorang yang membangun sebuah website dengan menggunakan bahasa pemograman tentunya. Untuk lebih detailnya, anda bisa mencari tahu ditempat lain karena sudah banyak web yang menjelaskan hal ini. Hanya saja, tidak diberitahu cara agar bisa menjadi web development. 
Harus Mulai Darimana Jikalau Mau Menjadi Web Development
Ayo Menjadi Seorang Web Development!

Disini saya ingin menjelaskan Bagaimana cara menjadi Web Development. Bukan berarti saya sudah pro dalam hal ini, karena saya juga sedang belajar untuk menjadi Web Development.

Perbedaan Web Development dan Web Designer

Sebagian orang mengatakan bahwa Web Development dan Web Designer itu sama, tetapi menurut saya tidak. Kenapa? Karena bagi saya seorang Web Development adalah orang yang membangun sebuah website yang lebih ditunjukan untuk membuat sistem / fungsi di web. Seperti jika pengunjung mengklik suatu tombol, maka apa yang terjadi? Jika Mengklik itu, apa yang terjadi? Mengklik ini? dan sebagainya

Sedangkan Web Designer adalah orang yang lebih difokuskan untuk menciptakan tampilan visual website agar lebih cantik, menarik, dan enak dipandang oleh pengujung. Biasanya berhubungan dengan tataletak, desain grafis, dan sebagainya.

Jadi Web Developement dan Designer adalah dua istilah yang berbeda tetapi memiliki tujuan yang sama, yaitu membangun sebuah web yang bagus.

Belajar untuk Menjadi Web Development

Tidak tahu harus mulai darimana? Dimana belajarnya? Apa-apa saja yang harus anda persiapkan? dan Sebagainya. Pertanyaan-pertanyaan inilah yang muncul saat pertamakali anda ingin menjadi seorang web development. Dibawah ini merupakan langkah awal yang harus anda lakukan untuk menuju keinginan anda.

Niat

Yang pertama pastinya adalah niat. Niat kan diri anda, bahwa anda ingin menjadi seorang developer yang handal. Niat ini yang akan menjadi pondasi anda untuk melangkah kedepan. Apalagi jika dibarengi do'a, insyaallah tujuan cepat tercapai.

Tentukan Tujuan

Tentukan tujuan/target/alasan ingin menjadi web development. Setelah itu, tulis disecarik kertas sebesar-besarnya dan letakan ditempat yang mudah dan sering anda lihat. Misalnya di dinding kamar, pintu wc, atau anda juga dapat menjadikannya sebagai wallpaper laptop/smartphone anda.  Ini akan menjadi motivasi anda ketika anda malas melanjutkan tujuan anda. Jadi, saat anda malas melanjutkan semua ini, kertas ini akan mengingatkan anda tujuan anda dan akan membuat semangat lagi.

Ketahui Apa yang Akan Dipelajari

Anda harus tahu apa yang akan dipelajari untuk menjadi seorang web development.
Harus Mulai Darimana Jikalau Mau Menjadi Web Development
HTML, CSS, JavaScript, Angular, Vue.js, PHP, Ruby, Phyton, Java, Github
Banyak bahasa pemrograman yang bisa anda pelajari sebagai seorang web development. Tetapi tidak semua bahasa pemrograman wajib untuk dipelajari. Menurut saya, setidaknya ada 5 bahasa yang harus anda pelajari, yaitu HTML, CSS, JavaScript, PHP, dan MYSQL. Lalu sisanya anda dapat memilih mana yang akan dipelajari.

Mulai Belajar HTML dan CSS Dasar

Mau itu Web Developer atau Web Designer, kedua bahasa ini wajib anda ketahui. Karena dua bahasa  ini adalah bahasa yang selalu dipakai dalam pembangunan website. Sekurang-kurangnya bahasa pemrograman anda, setidaknya anda harus tahu 2 bahasa ini walaupun dasarnya saja. 

Menjaga Konsistensi

Inilah point terpenting dan tersulit untuk dilakukan. Yaitu menjaga konsistensi. Maksudnya anda harus konsisten dalam menekuni bidang ini. Sudah seminggu anda belajar HTML, tiba-tiba anda malas untuk menjutkannya. Inilah yang disebut tidak konsisten. Memang merutinitaskan belajar memang bagus, tapi menjaga konsistensi lebih bagus. Konsisten = Teguh pada Pendirian.

Stop Thinking, Let's Do It...

Mungkin anda sudah banyak membaca artikel yang sejenis ini. Dan mungkin sekarang anda masih membaca dan berpikir. Jadi anda hanya membaca tanpa mengamalkan/mempraktikan apa yang anda baca. Maka dari itu, hentikan semua kegiatan anda. Dan lakukan apa yang telah anda baca sebelumnya. Anda dapat memulainya dengan menguatkan niat anda dan membuat tujuan/alasan anda untuk ditempelkan/diletakan ditempat yang mudah terlihat.

Penutup...

Mungkin untuk post kali ini menjelaskan tentang persiapan yang dilakukan untuk memulai tujuan baru anda. Yaitu menjadi seorang Web Development yang Handal. Saya juga sedang belajar. Berarti kita sama. Mungkin sekian dari saya, untuk selajutnya saya akan membahas tentang HTML. Terimakasih.