Powered by Blogger.
facebook twitter instagram pinterest bloglovin Email

Yasya Indra Blog

Éclairage et ingénierie

 


Kali ini saya akan membagikan tips bagaimana cara kita melakukan deployment pada VPS, terutama VPS yang dibeli dari IDCloudhost

Caranya sebenarnya cukup mudah, kita hanya perlu mensetup Nginx dan MySQL dan aplikasi lain yang dibutuhkan pada program kalian

Karena aplikasi saya merupakan aplikasi Laravel yang menggunakan PHP dan MySQL makan untuk cara kali ini saya akan mencoba menginstal PHP dan MySQL dalam VPS saya

Yuk tanpa basa basi kita langsung ikuti langkah langkah berikut

Namun jangan lupa persiapkan dulu beberapa hal

  • VPS dari IDCloudhost kalian bisa langsung cusss klik link berikut 
  • Project aplikasi kalian yang sudah dipush ke Github. Kalian bisa lihat contohnya disini
  • Putty

Langkah Langkah

Masuk ke dalam server VPS menggunakan putty. Segala detail server bisa lihat disini. Masukkan IP tersebut ke dalam Putty


Masukkan IP4 kalian seperti berikut


Lalu tampilan server akan muncul seperti berikut

Masuk sebagai root dengan perintah sudo su

Masukkan perintah berikut untuk mengaktifkan firewall
ufw allow OpenSSH
ufw enable
ufw status

Install LEMP

sudo apt update
sudo apt install nginx
sudo ufw allow 'Nginx HTTP'
sudo ufw status

Buka IP di browser maka kalian akan muncul tampilan seperti berikut

Install MySQL

sudo apt install mysql-server
sudo mysql
SELECT user,authentication_string,plugin,host FROM mysql.user;
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

Setelah kalian memasukkan perintah di atas, kalian harus memasukkan perintah berikut mysql -u root -p

Install PHP

sudo apt install php-fpm php-mysql

Menguji PHP apakah PHP sudah baik berjalan
sudo nano /etc/nginx/sites-available/default
Lalu tambahkan index.php disamping index.html
index index.php index.html index.htm index.nginx-debian.html;

Lalu tambahkan
location ~ \.php$ {
                include snippets/fastcgi-php.conf;
                fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
        }

location ~ /\.ht {
                deny all;
        }

Catatan: Sesuaikan fastcgi_pass unix:/var/run/php/php8.1-fpm.sock; dengan versi PHP kalian

Buat file php dengan perintah berikut
sudo nano /var/www/html/info.php

Dan isi dengan perintah berikut
<?php
phpinfo();

sudo nginx -t
sudo systemctl reload nginx
Buka URL
[http://ip_server_kalian(berupa angka)/info.php](http://103.214.113.49/info.php). Maka akan muncul segala detail seputar PHP
Contohnya seperti ini

Install Composer

sudo apt update
sudo apt install curl php-cli php-mbstring git unzip
cd ~
curl -sS [https://getcomposer.org/installer](https://getcomposer.org/installer) -o composer-setup.php

HASH=xxx
xxx merupakan kode unik yang diambil dari link berikut

php -r "if (hash_file('SHA384', 'composer-setup.php') === '$HASH') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer
composer

Install modul PHP

sudo apt update
sudo apt install php-mbstring php-xml php-bcmath

Buat database
mysql -u root -p
CREATE DATABASE nama_database_kalian
GRANT ALL ON nama_aplikasi.* TO 'nama_aplikasi'@'localhost' IDENTIFIED BY 'password' WITH GRANT OPTION;
exit

Setup aplikasi dari Github

sudo su
Masuk ke folder `cd /var/www`
Pull project kalian dari github `git clone URL_GITHUB_KALIAN NAMA_DOMAIN_KALIAN` 
cd NAMA_DOMAIN_KALIAN`
composer install
nano .env 

Copas konfigurasi kalian dari local, ganti bagian database
Ganti bagian `APP_DEBUG=false` dan `APP_ENV=production` biar kalau error ga muncul (mengamankan coding)
php artisan storage:link

Setting dulu Nginx nya
sudo chown -R www-data.www-data /var/www/NAMA_DOMAIN_KALIAN/storage
sudo chown -R www-data.www-data /var/www/NAMA_DOMAIN_KALIAN/bootstrap/cache
sudo nano /etc/nginx/sites-available/NAMA_DOMAIN_KALIAN

server {
    listen 80;
    server_name NAMA_DOMAIN_KALIAN;
    root /var/www/NAMA_DOMAIN_KALIAN/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

Ganti bagian server_name jadi `NAMA_DOMAIN_KALIAN`
Ganti bagian root jadi `/var/www/NAMA_DOMAIN_KALIAN/public;
Save filenya

sudo ln -s /etc/nginx/sites-available/NAMA_DOMAIN_KALIAN /etc/nginx/sites-enabled/
sudo nginx -t

Sehingga akan muncul tulisan seperti ini
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

sudo systemctl reload nginx

Migration

php artisan migrate:fresh --seed
npm install
npm run build

Setting domain

Saya senditi menggunakan Hostinger untuk mengarahkan domain ke IP. Kalia bisa klik disini untuk menggunakannya

Masuk ke panel hosting kalian (contoh disini pakai IDCloudHost)
Masuk manage DNS
Tambah Add Record
Namenya isi `NAMA_DOMAIN_KALIAN.` Depannya pakai titik
Type nya ganti A
Isi selanjutnya (RDATA / IP Address) masukin nama IP server kalian (bisa dicek di dashboard nya)
Add Record / Save


Jika semua langkah langkah di atas sudah dilakukan dengan baik, maka kita bisa buka website tersebut dengan domain yang sudah disetup. Contohnya seperti berikut

Kalian bisa membaca lebih asik project yang saya deploy menggunakan cara ini disini

Ambrosia, Admin Panel Untuk Jualan Makanan + RestFul API

Kalo kalian masih terkendala, kalian bisa tanya di kolom komentar di bawah

Share
Tweet
Pin
Share
No comments

 

Melakukan aktifitas penetrasi jaringan dan hacking lainnya terkadang membutuhkan kelengkapan perangkat yang mumpuni termasuk wireless adapter yang kita gunakan

Sayangnya tidak semua wireless adapter support atau mendukung monitor mode yaitu sebuah fitur pada driver wifi  yang mampu melakukan segala teknik hacking dengan maksimal.

Sedikit informasi, semua wifi yang kita gunakan terkadang belum dalam monitor mode. ia masih dalam managed mode yaitu default mode dari wifi itu sendiri. Mode Managed seperti ini sangat mempersulit segala proses hacking, kadang kita akan menjumpai error yang menyebalkan. Maka dari itu pastikan monitor mode sudah aktif pada driver wifi kalian. Kalian bisa mengecheknya dengan memasukkan perintah

iwconfig


Jika wlan0 kalian masih dalam managed mode, sebaiknya segera aktifkan monitor mode. Dan berikut langkah langkah dan persiapannya

Persiapan

  • Kali Linux Pada Virtual Box. Saya menggunakan file Virtual Machine dari website resminya
  • Wireless Adapter TP-Link TL-WN722N. Saya membelinya di Tokopedia. Berikut lik produknya

Langkah Langkah

Pasang Wireless Adapter kalian dengan cara klik icon di pojok kanan bawah


Masukkan perintah berikut untuk update dan upgrade package dalam OS kita

sudo apt update && sudo apt upgrade

Reboot
sudo reboot

Instal Kali Linux headers
sudo apt install linux-headers-$(uname -r)

Lalu reboot lagi ya dengan perintah diatas

Lalu install bc agar kita bisa memasukkan perintah make setelah ini
sudo apt install bc


Baca Juga: Review Kali Linux Versi 22.4, OS Sakti Untuk Hacking + Cara Install

Clone link berikut dari Github
git clone https://github.com/KanuX-14/rtl8188eus

Lalu masukkan perintah berikut untuk memblacklist driver yang sedang kita gunakan agar bisa menggunakan driver wlan terbaru

sudo -i
echo "blacklist r8188eu" > "/etc/modprobe.d/realtek.conf"
exit
reboot

Setalah reboot kalian masuk ke dalam folder dimana tadi mengclone driver dari Github
cd rtl8188eus
make
sudo make install
sudo modprobe 8188eu

Setelah itu kita aktifkan monitor mode secara lebih old fashion dengan perintah berikut

sudo ifconfig wlan0 down
sudo iwconfig wlan0 mode monitor
sudo ifconfig wlan0 up

Share
Tweet
Pin
Share
No comments

 


Kali ini saya akan memamerkan project yang sudah saya selesaikan bernama Ambrosia

Aplikasi berjalan dalam platform web yang berfungsi untuk menambahkan produk, transaksi, dan user pada aplikasi

Semua dilakukan dengan interface yang menarik. Data data tidak hanya bisa dikelola melalui dashboard namun juga bisa melalui API yang diakses menggunakan Postman

Nantinya response dari server ini bisa kalian fetch untuk bagian front end seperti aplikasi mobil menggunak React Nativa atau teknologi lainnya. Atau dikelola lagi pada framework web untuk front lainnya seperti NextJS atau Gatsby

Coretan Proses Pembuatan

Proses Pembuatan

Aplikasi ini saya buat menggunakan bahasa pemograman PHP. Untuk mempersingkat waktu, maka saya menggunakan framework Laravel. Penggunaannya cukup sederhana dan ringkas. Contohnya seperti melihat data berdasarkan ID, Laravel sudah mengerti dengan cukup mengarahkan model database mana yang diinginkan

Namun, sebelum membuat tampilan interfacenya. saya membangun rest apinya terlebih dahulu dan memastikan endpoint yang dibuat memberikan response yang baik

Lalu pada tahap deployment. Saya menggunakan VPS dari layanan IdCloudHost. Dengan spesifikasi berikut

  • Processor: 1 VCPU
  • RAM: 1024 GB
  • Boot Disk: 30 GB

Penampakan







Teknologi Yang Digunakan

  • PHP 8.1
  • Laravel Jetstream (Dashboard UI & Authentication)
  • Laravel Sanctum (REST API)
  • TailwindCSS
  • MySQL (Database)
  • Nginx (Web Server)

Fitur

  • CRUD User, Produk (Makanan), Transaksi
  • Login, Register, Authentication & Registration
  • Profile Photo, Product Image
  • Intergrasi Midtrans

Cocok Untuk

  • Produk Ecommerce
  • Data Data Transaksional

Demo: http://ambrosia.yasya.tech/

Sourcecode: https://github.com/yasyaindra/ambrosia

Tentu terdapat banyak sekali kekurangan dan bug dalam aplikasi ini. Segala bentuk masukkan dan saran sangat berharga. Segera hubungi saya melalui sosial media dibawah

Instagram: @yasyaindra

Email : indramyasya@gmail.com

Share
Tweet
Pin
Share
No comments

Kali ini saya akan membagikan sourcecode template undangan online. Web ini dibuat menggunakan Bootstrap dan sudah responsive dalam tampilan mobile

Cara pembuatanya sangat sederhana. Pertama saya iseng mencari wedding inviitation template di google image lalu saya memberanikan menirut dari tampilan tersebut dalam mendesign web menggunakan html dan css


Fitur:

  • Slide
  • Address
  • Countdown
  • Message
  • Google Map
Teknologi Yang Digunakan
  • Bootstrap 5
Demo: 
  • https://yasyaindra.github.io/lovebirds/
Sourcecode: 
  • https://github.com/yasyaindra/lovebirds

Share
Tweet
Pin
Share
No comments

Wheelcart merupakan aplikasi web ecommerce yang dibangun menggunakan Laravel 9 dan Bootstrap. Saya membuat ini menggunakan PHP 8. Proses pembuatannya diawali dengan mendesign tampilan front end menggunakan Bootstrap. Mula mula saya mendesign terlebih dahulu di Adobe XD

Wireframes

Wireframe dari aplikasi WheelCart

Dibuat dari halaman Home, untuk menampilkan beranda berdasarkan brand, product product terlaris dan highlight product yang lain. Halaman Single Product untuk melihat review dan deskripsi poduct yang dipilih. dan halaman Cart untuk melanjutkan proses checkout

Setelah itu proses penulisan kode menggunakan framework Bootstrap agar proses bisa dengan cepat diselesaikan dan  tampilan bisa responsive ketika diakses dari mobile

Setelah menyelesaikan wireframe kemudian saya mendesign database seperti berikut

Design Database


Demo: https://wheelcart.yasya.tech/

Sourcecode: https://github.com/yasyaindra/wheelcart-backend

Fitur

  • Add Cart
  • Login
  • Single Product
  • Showing All Products

Cocok Untuk

  • Toko Online

Share
Tweet
Pin
Share
No comments

Saya akan memperkenalkan project terbaru saya bernama Scratcher yaitu sebuah aplikasi web yang saya kembangkan untuk keperluan CRUD (Create, Read, Update dan Delete) artikel post. Aplikasi ini juga memiliki fitur register, login dan tagging category yang menerapkan relasi antar database

Teknologi yang saya gunakan.

  • Laravel 9
  • HTML, CSS
Fitur:
  • CRUD
  • Login & Register
  • Tagging
  • Dashboard
  • Text Editor
  • Responsive Mobile
Cocok Untuk
  • Company Profile
  • Blog Pribadi
  • Website Berita

Demo
https://scratcher.yasya.tech/

Sourcecode
https://github.com/yasyaindra/scratcher







Saya mengerti masih terdapat beberapa kekurangan dalam pembuatan website ini, namun anda bisa menghubungi saya lebih lanjut lewat Instagram atau Email

  • Instagram: @techofyasyaindra
  • Email: indramyasya@gmail.com

Share
Tweet
Pin
Share
No comments

 


Kali ini saya akan membagikan cara bagaimana mengambil data blogger menggunakan API

Terkadang untuk beberapa keperluan kita membutuhkan data data dari Blogger agar bisa ditampilkan pada aplikasi tertentu
Bisa aplikasi android milik kalian, bisa personal blog lain, dan lain sebagainya

Maka dari itu kita membutuhkan API yang sudah disediakan oleh Google agar satu aplikasi dengan aplikasi lain bisa saling berkomunikasi

Proses ini biasa disebut sebagai fetching. Yaitu proses pengambilan data dari response sebuah API dengan cara mengirimkan request tertentu. Biasanya terdapat GET, POST, PUT dan DELETE

Sebelum kita lanjut, persiapkan dulu beberapa hal di bawah
  • Postman
  • API Key yang digenerate dari website resminya.Caranya kalian klik tombol biru Get an OAuth client ID

Jika sudah langsung saja ikuti langkah langkah di bawah

Langkah Langkah

Lalian buka Postman. Mengapa? karena kita perlu menguji API apakah berhasil mengirimkan response dengan baik
Jangan lupa untuk masukkan API Key yang barusan kalian dapatkan. INGAT JANGAN BAGIKAN API KEY SECARA PUBLIK


URL yang kita gunakan adalah https://www.googleapis.com/blogger/v3/blogs/masukkanBloggerIDkalian/posts

Blogger ID bisa kalian lihat dengan cara buka Dashbord Blogger kalian dan lihat angka di dalam URL kalian. Itulah Blogger ID kalian\



Maka Postman akan menerima response seperti berikut


Tapi pertanyaannya bagaimana cara mengambil data ini menggunakan kodingan?

Saya akan memberi tahu scriptnya. Kalian bisa mengunjungi Github saya, atau liat kode dibawah

const url = `${api}/${userId}/posts?key=${key}`;
(async function main() {
  const res = await fetch(url, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  });
  const json = await res.json();
  const items = json.items;
  console.log(items)
})()

Ketika dijalankan maka kita berhasil mendapatkan response seperti berikut

Setelah itu kalian bisa berkreasi untuk menempatkan data data ini ke dalam website kalian.

Semoga membantu :)
Share
Tweet
Pin
Share
No comments

 


Sebenarnya tidak pernah ada cara cepat untuk belajar suatu bidang keahlian. Semua orang membutuhkan setidaknya tiga sampae lima tahun kerja keras untuk menekuni bidang yang mereka minati. 

Saya sendiri lewat tulisan ini tidak bisa bisa memberikan dengan pasti bagaimana belajar Adobe XD dengan cepat dan jago. Saya disini akan memberikan bagaimana cara yang ringkas mempelajari Adobe XD untuk UI Designer (yang saya rasa) dengan baik dan benar

Perlu di garis bawahi, saya sehari hari memang tidak bekerja sebagai UI designer, namun ada beberapa kasus yang mengharuskan saya melakukan design interface menggunakan Adobe XD

Memang tidak rumit, namun setidaknya membantu saya menerapkan kode dan merealisasikan program yang saya buat

Berikut langkah langkah yang harus dilakukan

1. Pilih 3 Inspirasi Template Web/Mobile

Pertama kalian pilih beberapa template web yang bisa jadi inspirasi kalian. Kalia bisa ambil dari instagram, dribble, atau pinterest, semuanya bebas. Ambil kira kira 3 yang terbaik dan sedikit sedikit amati tiru dan modifikasi.

Template yang dipilih merupakan design yang benar benar merupakan selera kalian. Jadi bebas. Atau bisa juga design yang sesuai dengan request client kalian

2. Buat Wireframe Sederhana

Caranya adalah dengan mencari wireframe yang berseliweran di internet. Saya akan membagikan milik saya disini. Bisa kalian gunakan untuk belajar dan memolesnya menjadi design yang lain

Tentu kalian akan bingung dengan cara mengoperasikannya pertama kali. Nah, kalian harus menonton video youtube tentang pengenalan aplikasi Adobe XD di Youtube. Namun jangan hanya nonton saja, kalian harus memprakteknya sesering mungkin

3. Berusahalah Mati Matian Untuk Meniru Design Yang Sudah Ada

Yaaa memang kebaca lebay, tapi memang begitu. Menurut saya cara terbaik adalah dengan memaksakan kita melihat hasil orang lain lalu coba untuk merancangnya sendiri.

Tiru komponen komponen web, font, warnan, jarak, ukuran, dsb dari wireframe yang kalian lihat. Tiru semirip mungkin sampai kalian benar benar terbiasa.

Belajar Adobe XD tidak akan efektif dengan menonton video berjam jam. Bisa juga jika kalian sambi dengan menontoon Youtube tapi itu terlalu memakan banyak waktu. 

Maka dari itu cara cepatnya adalah dengan mencobanya sendiri, bereksperimen, dan gagal berkali kali. Tentu percobaan pertama akan jelek, tapi kalo sering berlatih kalian akan merasakan dampak yang besar

Kesimpulan

Jadi cara paling cepat untuk mempelajari Adobe XD bukan dengan menonton video tutorial youtube berjam jam, tapi juga dengan mempraktekan dan langsung menirukan design yang sudah ada pada workspace Adobe XD kalian

Share
Tweet
Pin
Share
No comments
Newer Posts
Older Posts

About me

About Me

Techbros Writer. Educactor, you name it

Follow Us

  • instagram
  • youtube

Categories

Materi Kuliah Buku Internet Stuff

recent posts

Sponsor

Blog Archive

  • March 2025 (4)
  • February 2025 (1)
  • November 2024 (3)
  • October 2024 (1)
  • January 2024 (1)
  • December 2023 (12)
  • November 2023 (9)
  • October 2023 (1)
  • September 2023 (3)
  • August 2023 (14)
  • July 2023 (3)
  • June 2023 (11)
  • May 2023 (3)
  • April 2023 (1)
  • March 2023 (1)
  • February 2023 (8)
  • January 2023 (6)
  • December 2022 (3)
  • November 2022 (2)
  • October 2022 (3)
  • September 2022 (3)
  • August 2022 (1)
  • July 2022 (1)
  • June 2022 (1)
  • May 2022 (1)
  • March 2022 (4)
  • February 2022 (8)
  • January 2022 (8)
  • December 2021 (4)
  • November 2021 (11)
  • October 2021 (6)
  • August 2021 (9)
  • July 2021 (5)
  • June 2021 (5)
  • May 2021 (4)
  • April 2021 (4)
  • March 2021 (6)
  • February 2021 (2)
  • January 2021 (7)
  • December 2020 (5)
  • November 2020 (2)
  • October 2020 (5)
  • September 2020 (6)
  • July 2020 (1)
  • June 2020 (1)
  • May 2020 (6)
  • March 2020 (1)
  • January 2020 (3)
  • December 2019 (3)
  • November 2019 (12)
  • October 2019 (8)
  • September 2019 (6)
  • August 2019 (8)
  • July 2019 (6)
  • June 2019 (3)
  • May 2019 (8)
  • April 2019 (2)

Report Abuse

Created with by ThemeXpose