<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>creatorbe links</title>
    <description>Hasan B | Fullstack Dev &amp; IT Generalist</description>
    <link>https://creatorbe.github.io/</link>
    <atom:link href="https://creatorbe.github.io/sitemap.xml" rel="self" type="application/rss+xml"/>
    <pubDate>Thu, 22 Jan 2026 07:20:52 +0000</pubDate>
    <lastBuildDate>Thu, 22 Jan 2026 07:20:52 +0000</lastBuildDate>
    <generator>Jekyll v3.10.0</generator>
    
      <item>
        <title>Building a Portfolio site with Next.js and Vercel</title>
        <description>&lt;p&gt;بِسْــــــــــــــــــمِ اللهِ الرَّحْمَنِ الرَّحِيْمِ&lt;/p&gt;

&lt;p&gt;اَلْحَمْدُ للّٰهِ رَبِّ العَالَمِيْنَ والعاقبة للمتقين&lt;/p&gt;

&lt;p&gt;وَالصَّلاَةُ وَالسَّلَامُ عَلىَ إمام الْمُرْسَلِيْنَ،نبيين مُحَمَّدٍ وَعَلَى اٰلِهِ وَصَحْبِهِ اَجْمَعِيْنَ&lt;/p&gt;

&lt;p&gt;ربى اشرح لى صدرى ويسر لى امرى واحلل عقدة من لسانى يفقهو قولي&lt;/p&gt;

&lt;p&gt;اللّهُمَّ إِنِّيْ أَعُوْذُ بِكَ مِنْ عِلْمٍ لاَ يَنْفَعُ، وَمِنْ قَلْبٍ لاَ يَخْشَعُ، وَمِنْ نَفْسٍ لاَ تَشْبَعُ، وَمِنْ دَعْوَةٍ لاَ يُسْتَجَابُ لَهَا&lt;/p&gt;

&lt;p&gt;اَمَّا بَعْدُ&lt;/p&gt;

&lt;h3 id=&quot;muslim-intro--qs-ash-sharh-al-insyirah---947&quot;&gt;Muslim Intro : QS. Ash-Sharh (Al-Insyirah) - 94:7&lt;/h3&gt;
&lt;p&gt;فَإِذَا فَرَغْتَ فَٱنصَبْ&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;When you have completed your affairs and obligations (both worldly and deen akhirah) then devote yourself diligently to worship. And supplicate, to your Lord alone, hoping for what lies with Him.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
  &lt;p&gt;An educator once said: “On the last day of my exams, I was thinking about all the things I would do during the holidays : sleeping, playing, joking around, and so on. Suddenly, my thoughts were interrupted by the voice of the Imam leading the Maghrib prayer, reciting:
{ So when you have finished [your duties], then stand up [for worship]. And to your Lord direct [your] longing. } (Quran 94:7–8)
At that moment, I realized that a Muslim should never cease being in a state of obedience to Allah. Rather, one should move from one act of obedience to another.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
  &lt;p&gt;If someone says: “If I were serious all the time in my life, I would surely grow tired and bored.” and We respond: Your rest to regain your energy is itself a form of engagement and deed—that is, being occupied does not always mean being in motion. Your rest to renew your vigor for other tasks is also an act. What matters is that you consistently make your entire life one of seriousness and work.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;“hanya kepada Allah kita meminta, semoga lelah kita lillah”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;رَبَّنَا تَقَبَّلْ مِنَّا إِنَّكَ أَنْتَ السَّمِيعُ الْعَلِيمُ&lt;/p&gt;

&lt;hr /&gt;
&lt;h1 id=&quot;a-step-by-step-guide-to-creating-a-clean-portfolio-website&quot;&gt;A step-by-step guide to creating a clean portfolio website&lt;/h1&gt;

&lt;h2 id=&quot;introduction&quot;&gt;Introduction&lt;/h2&gt;

&lt;p&gt;As developers, our portfolio is often the first impression we make on potential employers or clients. In this post, I’ll walk you through how I built my personal portfolio website using &lt;strong&gt;Next.js 16&lt;/strong&gt;, &lt;strong&gt;Tailwind CSS v4&lt;/strong&gt;, and deployed it on &lt;strong&gt;Vercel&lt;/strong&gt; — all with a minimalist, terminal-inspired aesthetic that screams “I’m an engineer.”&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Live Demo:&lt;/strong&gt; &lt;a href=&quot;https://creatorbe.vercel.app&quot;&gt;creatorbe.vercel.app&lt;/a&gt;&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;tech-stack&quot;&gt;Tech Stack&lt;/h2&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;Framework:&lt;/strong&gt; Next.js 16 (App Router)&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Styling:&lt;/strong&gt; Tailwind CSS v4&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Theme:&lt;/strong&gt; next-themes (Dark/Light mode)&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Icons:&lt;/strong&gt; Lucide React&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Deployment:&lt;/strong&gt; Vercel&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Font:&lt;/strong&gt; System monospace&lt;/li&gt;
&lt;/ul&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;step-1-setting-up-the-project&quot;&gt;Step 1: Setting Up the Project&lt;/h2&gt;

&lt;p&gt;First, create a new Next.js project:&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;npx create-next-app@latest my-vercel
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Select the following options:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;✅ TypeScript&lt;/li&gt;
  &lt;li&gt;✅ Tailwind CSS&lt;/li&gt;
  &lt;li&gt;✅ ESLint&lt;/li&gt;
  &lt;li&gt;✅ App Router&lt;/li&gt;
  &lt;li&gt;❌ src/ directory (optional, I used it)&lt;/li&gt;
  &lt;li&gt;❌ Import alias customization&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Navigate to your project:&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;cd &lt;/span&gt;my-vercel
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;step-2-install-dependencies&quot;&gt;Step 2: Install Dependencies&lt;/h2&gt;

&lt;p&gt;Install the required packages for theming:&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;npm &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;next-themes lucide-react
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;step-3-configure-tailwind-css-v4-for-dark-mode&quot;&gt;Step 3: Configure Tailwind CSS v4 for Dark Mode&lt;/h2&gt;

&lt;p&gt;In Tailwind CSS v4, dark mode configuration is different. Update your &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;globals.css&lt;/code&gt;:&lt;/p&gt;

&lt;div class=&quot;language-css highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;@import&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&quot;tailwindcss&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;@custom-variant&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;dark&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;amp;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;where&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;dark&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;dark&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;This enables the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;dark:&lt;/code&gt; variant to work with class-based dark mode.&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;step-4-create-the-theme-provider&quot;&gt;Step 4: Create the Theme Provider&lt;/h2&gt;

&lt;p&gt;Create &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;src/components/theme-provider.tsx&lt;/code&gt;:&lt;/p&gt;

&lt;div class=&quot;language-tsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;use client&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ThemeProvider&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;NextThemesProvider&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;type&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ThemeProviderProps&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;next-themes&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ThemeProvider&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ThemeProviderProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;NextThemesProvider&lt;/span&gt; &lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;NextThemesProvider&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;step-5-create-the-theme-toggle&quot;&gt;Step 5: Create the Theme Toggle&lt;/h2&gt;

&lt;p&gt;Create &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;src/components/theme-toggle.tsx&lt;/code&gt;:&lt;/p&gt;

&lt;div class=&quot;language-tsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;use client&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;react&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Moon&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Sun&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;lucide-react&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;useTheme&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;next-themes&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ThemeToggle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;resolvedTheme&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;setTheme&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;useTheme&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;
  &lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;mounted&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;setMounted&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;useState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;

  &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;useEffect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;setMounted&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[]);&lt;/span&gt;

  &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;mounted&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;w-8 h-8 rounded border border-neutral-300 dark:border-neutral-700&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;/&amp;gt;;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;isDark&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;resolvedTheme&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;dark&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;button&lt;/span&gt;
      &lt;span class=&quot;na&quot;&gt;onClick&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;setTheme&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;isDark&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;light&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;dark&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;
      &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;inline-flex items-center justify-center w-8 h-8 rounded border border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors&quot;&lt;/span&gt;
      &lt;span class=&quot;na&quot;&gt;aria-label&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Toggle theme&quot;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;isDark&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Sun&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;h-4 w-4 text-amber-500&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Moon&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;h-4 w-4 text-neutral-600&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;blockquote&gt;
  &lt;p&gt;&lt;strong&gt;Important:&lt;/strong&gt; Use &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;resolvedTheme&lt;/code&gt; instead of &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;theme&lt;/code&gt; to get the actual theme value, especially when &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;enableSystem&lt;/code&gt; is true.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;step-6-setup-the-root-layout&quot;&gt;Step 6: Setup the Root Layout&lt;/h2&gt;

&lt;p&gt;Update &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;src/app/layout.tsx&lt;/code&gt;:&lt;/p&gt;

&lt;div class=&quot;language-tsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;./globals.css&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ThemeProvider&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;@/components/theme-provider&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;type&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Metadata&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;next&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;metadata&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Metadata&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;Your Name - Developer Portfolio&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;description&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;Your description here&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;icons&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;icon&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;/favicon.ico&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;RootLayout&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ReactNode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;})&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;html&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;lang&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;en&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;suppressHydrationWarning&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;bg-white dark:bg-[#0d1117]&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;ThemeProvider&lt;/span&gt;
          &lt;span class=&quot;na&quot;&gt;attribute&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;class&quot;&lt;/span&gt;
          &lt;span class=&quot;na&quot;&gt;defaultTheme&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;dark&quot;&lt;/span&gt;
          &lt;span class=&quot;na&quot;&gt;enableSystem&lt;/span&gt;
          &lt;span class=&quot;na&quot;&gt;disableTransitionOnChange&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
          &lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;ThemeProvider&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;step-7-design-philosophy--terminal-aesthetic&quot;&gt;Step 7: Design Philosophy — Terminal Aesthetic&lt;/h2&gt;

&lt;p&gt;I wanted my portfolio to feel like a developer’s natural habitat: &lt;strong&gt;the terminal&lt;/strong&gt;. Here’s the design approach:&lt;/p&gt;

&lt;h3 id=&quot;monospace-font&quot;&gt;Monospace Font&lt;/h3&gt;
&lt;div class=&quot;language-tsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;font-mono&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;terminal-style-header&quot;&gt;Terminal-style Header&lt;/h3&gt;
&lt;div class=&quot;language-tsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;span&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;text-green-600 dark:text-green-400&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;~/creatorbe&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;command-style-about-section&quot;&gt;Command-style About Section&lt;/h3&gt;
&lt;div class=&quot;language-tsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;bg-neutral-100 dark:bg-neutral-900 rounded-lg border&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;cm&quot;&gt;/* Terminal window dots */&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;flex items-center gap-2 px-4 py-2 bg-neutral-200 dark:bg-neutral-800&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;w-3 h-3 rounded-full bg-red-500&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;w-3 h-3 rounded-full bg-yellow-500&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;w-3 h-3 rounded-full bg-green-500&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;span&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;ml-2 text-xs text-neutral-500&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;about.sh&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;

  &lt;span class=&quot;si&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;cm&quot;&gt;/* Terminal content */&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;p-4 text-sm&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;text-green-600 dark:text-green-400&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;$ whoami&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;text-neutral-600 dark:text-neutral-400 mt-1&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
      A Software Engineer with expertise in building scalable applications...
    &lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;markdown-style-headings&quot;&gt;Markdown-style Headings&lt;/h3&gt;
&lt;div class=&quot;language-tsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;h2&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;text-lg font-bold flex items-center gap-2&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;span&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;text-green-600 dark:text-green-400&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;#&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt; Tech Stack
&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;h2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;config-file-style-tech-lists&quot;&gt;Config-file Style Tech Lists&lt;/h3&gt;
&lt;div class=&quot;language-tsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;border-l-2 border-green-500 pl-4&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;span&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;text-cyan-600 dark:text-cyan-400&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;frontend:&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
    Next.js, React.js, TypeScript
  &lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;step-8-the-matrix-banner&quot;&gt;Step 8: The Matrix Banner&lt;/h2&gt;

&lt;p&gt;To add that extra “nerd” touch, I used a Matrix-style animated GIF as a banner:&lt;/p&gt;

&lt;div class=&quot;language-tsx highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;w-full h-48 sm:h-64 relative overflow-hidden&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Image&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;https://raw.githubusercontent.com/CreatorB/creatorb/main/creatorbe-hasanbasri-matrix.gif&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Matrix Banner&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;fill&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;object-cover opacity-60 dark:opacity-40&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;unoptimized&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;/&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;absolute inset-0 bg-gradient-to-b from-transparent to-white dark:to-[#0d1117]&quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;The gradient overlay creates a smooth fade into the content below.&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;step-9-deploy-to-vercel&quot;&gt;Step 9: Deploy to Vercel&lt;/h2&gt;

&lt;p&gt;Deploying to Vercel is incredibly simple:&lt;/p&gt;

&lt;h3 id=&quot;option-1-via-github-integration&quot;&gt;Option 1: Via GitHub Integration&lt;/h3&gt;

&lt;ol&gt;
  &lt;li&gt;Push your code to GitHub:
    &lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;git init
git add &lt;span class=&quot;nb&quot;&gt;.&lt;/span&gt;
git commit &lt;span class=&quot;nt&quot;&gt;-m&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;Initial commit&quot;&lt;/span&gt;
git remote add origin https://github.com/yourusername/your-repo.git
git push &lt;span class=&quot;nt&quot;&gt;-u&lt;/span&gt; origin main
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;Go to &lt;a href=&quot;https://vercel.com&quot;&gt;vercel.com&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;Click “New Project”&lt;/li&gt;
  &lt;li&gt;Import your GitHub repository&lt;/li&gt;
  &lt;li&gt;Click “Deploy”&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That’s it! Vercel automatically detects Next.js and configures everything.&lt;/p&gt;

&lt;h3 id=&quot;option-2-via-vercel-cli&quot;&gt;Option 2: Via Vercel CLI&lt;/h3&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;npm &lt;span class=&quot;nb&quot;&gt;install&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-g&lt;/span&gt; vercel
vercel login
vercel
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;step-10-custom-domain-optional&quot;&gt;Step 10: Custom Domain (Optional)&lt;/h2&gt;

&lt;p&gt;In Vercel Dashboard:&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;Go to your project → Settings → Domains&lt;/li&gt;
  &lt;li&gt;Add your custom domain&lt;/li&gt;
  &lt;li&gt;Update DNS records as instructed&lt;/li&gt;
&lt;/ol&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;key-takeaways&quot;&gt;Key Takeaways&lt;/h2&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Tailwind CSS v4&lt;/strong&gt; requires &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;@custom-variant&lt;/code&gt; for dark mode with classes&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Use &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;resolvedTheme&lt;/code&gt;&lt;/strong&gt; from next-themes for reliable theme detection&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Monospace fonts&lt;/strong&gt; give that authentic developer feel&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Subtle animations&lt;/strong&gt; (like the Matrix banner) add personality without being distracting&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Vercel deployment&lt;/strong&gt; is literally one-click with GitHub integration&lt;/li&gt;
&lt;/ol&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;project-structure&quot;&gt;Project Structure&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;src/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── theme-provider.tsx
│   └── theme-toggle.tsx
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;final-thoughts&quot;&gt;Final Thoughts&lt;/h2&gt;

&lt;p&gt;Building a portfolio doesn’t have to be complicated. With Next.js and Tailwind CSS, you can create something that’s both &lt;strong&gt;functional&lt;/strong&gt; and &lt;strong&gt;expressive&lt;/strong&gt; of your personality as a developer.&lt;/p&gt;

&lt;p&gt;The terminal aesthetic isn’t just about looking cool—it’s a statement that says &lt;em&gt;“I live in the command line, and I’m proud of it.”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Feel free to fork my repository and make it your own!&lt;/p&gt;

&lt;hr /&gt;

&lt;p&gt;&lt;strong&gt;Source Code:&lt;/strong&gt; &lt;a href=&quot;https://github.com/CreatorB/my-vercel&quot;&gt;github.com/CreatorB/my-vercel&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Live Site:&lt;/strong&gt; &lt;a href=&quot;https://creatorbe.vercel.app&quot;&gt;creatorbe.vercel.app&lt;/a&gt;&lt;/p&gt;

&lt;hr /&gt;
&lt;p&gt;اَللّٰهُ أَعْلَم&lt;/p&gt;

&lt;p&gt;&lt;em&gt;al-faqiir ilaa rahmatillahi ta’ala&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;✎ Hasan B&lt;/p&gt;

&lt;p&gt;◉ Kiunara, KP Tengah, Cileungsi, Bogor, West Java, Indonesia&lt;/p&gt;

&lt;p&gt;📅 Tuesday, 4 Rajab 1447 H, 22:10&lt;/p&gt;
</description>
        <pubDate>Tue, 23 Dec 2025 15:10:00 +0000</pubDate>
        <link>https://creatorbe.github.io/programming/2025/12/23/how-to-build-portfolio-website-with-next-js-and-vercel.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/programming/2025/12/23/how-to-build-portfolio-website-with-next-js-and-vercel.html</guid>
        
        
        <category>programming</category>
        
      </item>
    
      <item>
        <title>IT Infrastructure Handbook</title>
        <description>&lt;p&gt;بِسْــــــــــــــــــمِ اللهِ الرَّحْمَنِ الرَّحِيْمِ&lt;/p&gt;

&lt;p&gt;اَلْحَمْدُ للّٰهِ رَبِّ العَالَمِيْنَ والعاقبة للمتقين&lt;/p&gt;

&lt;p&gt;وَالصَّلاَةُ وَالسَّلَامُ عَلىَ إمام الْمُرْسَلِيْنَ،نبيين مُحَمَّدٍ وَعَلَى اٰلِهِ وَصَحْبِهِ اَجْمَعِيْنَ&lt;/p&gt;

&lt;p&gt;ربى اشرح لى صدرى ويسر لى امرى واحلل عقدة من لسانى يفقهو قولي&lt;/p&gt;

&lt;p&gt;اللّهُمَّ إِنِّيْ أَعُوْذُ بِكَ مِنْ عِلْمٍ لاَ يَنْفَعُ، وَمِنْ قَلْبٍ لاَ يَخْشَعُ، وَمِنْ نَفْسٍ لاَ تَشْبَعُ، وَمِنْ دَعْوَةٍ لاَ يُسْتَجَابُ لَهَا&lt;/p&gt;

&lt;p&gt;اَمَّا بَعْدُ&lt;/p&gt;

&lt;h3 id=&quot;hadith-intro---chapter-regarding-the-divine-decree-qadr&quot;&gt;Hadith Intro - Chapter: Regarding the Divine Decree (Qadr)&lt;/h3&gt;

&lt;p&gt;الْمُؤْمِنُ الْقَوِيُّ خَيْرٌ وَأَحَبُّ إِلَى اللَّهِ مِنَ الْمُؤْمِنِ الضَّعِيفِ وَفِي كُلٍّ خَيْرٌ احْرِصْ عَلَى مَا يَنْفَعُكَ وَاسْتَعِنْ بِاللَّهِ وَلاَ تَعْجِزْ فَإِنْ أَصَابَكَ شَىْءٌ فَلاَ تَقُلْ لَوْ أَنِّي فَعَلْتُ كَذَا وَكَذَا ‏.‏ وَلَكِنْ قُلْ قَدَّرَ اللَّهُ وَمَا شَاءَ فَعَلَ فَإِنَّ ‏”‏ لَوْ ‏”‏ تَفْتَحُ عَمَلَ الشَّيْطَانِ&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;The strong believer is better and more beloved to Allah than the weak believer, although both are good. Strive for that which will benefit you, seek the help of Allah, and do not feel helpless. If anything befalls you, &lt;strong&gt;do not say, “if only I had done such and such” rather say “Qaddara Allahu wa ma sha’a fa’ala (Allah has decreed and whatever he wills, He does).” For (saying) ‘If’ opens (the door) to the deeds of Satan&lt;/strong&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href=&quot;https://sunnah.com/ibnmajah:79&quot;&gt;Sunan Ibn Majah 79&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Prohibition of “If Only”&lt;/strong&gt; Do not say, “If only I had done such and such…”, for saying “if” opens the door to the deeds of Satan. This ruling clarifies that the word “if” must not be used to oppose destiny. When facing sickness, death, or calamity, one must submit, be patient, and seek reward from God rather than dwelling on unchangeable past events. Such regret leads only to fruitless doubt and despair. Instead, the believer should affirm: “Allah has decreed, and whatever He wills, He does” (Qaddara Allahu wa ma sha’a fa’ala).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Nuance of Regret It&lt;/strong&gt; is important to distinguish between prohibited and permissible uses of “if only”:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;Prohibited: Using it to object to fate or dwell on negative outcomes (e.g., “If only I chose a different doctor, he wouldn’t have died”).&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Permissible: Using it to express a desire for missed opportunities to do good, without questioning God’s decree (e.g., “If I had known he was sick, I would have visited him”).&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Distinguishing Free Will from Compulsion&lt;/strong&gt; Humans inherently possess the ability to distinguish between voluntary actions driven by their free will and involuntary actions caused by compulsion. For instance, intentionally walking down stairs is recognized as a personal choice, whereas accidentally falling is understood as occurring without one’s will. Similarly, involuntary bodily functions due to illness (like incontinence) are clearly distinguished from voluntary functions after recovery. Every individual instinctively recognizes this difference.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Theological Consistency&lt;/strong&gt; Because we know this difference, it is fundamentally unjust to inconsistently shift theological stances based on convenience. One should not adopt a deterministic mindset (Jabriyyah) only when sinning—claiming it is inescapable fate—while adopting a free-will mindset (Qadariyyah) when performing good deeds—claiming full personal credit for their obedience.&lt;/p&gt;

&lt;p&gt;اللَّهُمَّ أَرِنَا الْحَقَّ حَقًّا، وَارْزُقْنَا اتِّبَاعَهُ. ،وَأَرِنَا الْبَاطِلَ بَاطِلاً، وَارْزُقْنَا اجْتِنَابَهُ&lt;/p&gt;

&lt;hr /&gt;

&lt;h1 id=&quot;ultimate-network-infrastructure-guide&quot;&gt;Ultimate Network Infrastructure Guide&lt;/h1&gt;

&lt;p&gt;This guide is designed to be followed from top to bottom. It transforms a fresh Mikrotik into a powerful, segmented network firewall with ad-blocking and remote access capabilities.&lt;/p&gt;

&lt;h2 id=&quot;1-hardware--safety-anti-lightning&quot;&gt;1. Hardware &amp;amp; Safety (Anti-Lightning)&lt;/h2&gt;

&lt;p&gt;&lt;a href=&quot;https://youtu.be/5wLF5VXhg7c&quot;&gt;&lt;img src=&quot;https://res.cloudinary.com/creatorbe/image/upload/creatorbe.github.io-fullstack-it-20251103-it-infrastructure-handbook_wtsolt.png&quot; alt=&quot;YouTube Demo&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Before configuring software, we must secure the hardware. Since I live in a lightning-prone area, I use &lt;strong&gt;Optical Isolation and Barrel Connector&lt;/strong&gt; to protect the router.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Logic:&lt;/strong&gt; Lightning surges travel through copper wires (ISP cables). They cannot travel through glass (Fiber Optic).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Topology:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&quot;language-text highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;[ISP Modem (Bridge Mode)]
      | (RJ45 Cable)
[Media Converter A]
      |
      | (Fiber Optic Patch Cable - The &quot;Safety Gap&quot;)
      |
[Media Converter B]
      | (RJ45 Cable)
[Mikrotik RB5009 (Port 1 - Internet)]
      | (RJ45 Barrel)
[Router / Access Point]
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;em&gt;Note: If lightning strikes the ISP line, only “Media Converter A” burns. The expensive router remains safe.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I have also written a small proposal (Indonesian Version) that you can review : &lt;a href=&quot;https://drive.google.com/file/d/1BiSdEaLurNc_z5a-gpIEJ_O7kO6PTVpo&quot;&gt;Network &amp;amp; Electrical Surge Protection&lt;/a&gt;&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;2-mikrotik-configuration&quot;&gt;2. Mikrotik Configuration&lt;/h2&gt;

&lt;p&gt;I have prepared a complete script based on the “Ma’had Syathiby” topology. It separates traffic into groups: &lt;strong&gt;Ikhwan (Men), Akhwat (Women), IT, Lab, and Streaming&lt;/strong&gt;.&lt;/p&gt;

&lt;h3 id=&quot;how-to-apply&quot;&gt;How to apply:&lt;/h3&gt;

&lt;ol&gt;
  &lt;li&gt;Download Winbox from Mikrotik.com.&lt;/li&gt;
  &lt;li&gt;Connect your PC to &lt;strong&gt;Port 2&lt;/strong&gt; of the router.&lt;/li&gt;
  &lt;li&gt;Open Winbox, click “Terminal” on the left menu.&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Copy and Paste&lt;/strong&gt; the following scripts one by one.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;part-a-interface--ip-setup&quot;&gt;Part A: Interface &amp;amp; IP Setup&lt;/h3&gt;

&lt;p&gt;Renames ports and sets up network addresses.&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# 1. Reset &amp;amp; Preparation&lt;/span&gt;
/system identity &lt;span class=&quot;nb&quot;&gt;set &lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;RB5009-Main&quot;&lt;/span&gt;
/interface ethernet
&lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt; find default-name&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether1 &lt;span class=&quot;o&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether1-Internet loop-protect&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;on
&lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt; find default-name&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether2 &lt;span class=&quot;o&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether2-LAN-Ikhwan loop-protect&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;on
&lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt; find default-name&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether3 &lt;span class=&quot;o&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether3-WiFi-Ikhwan loop-protect&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;on
&lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt; find default-name&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether4 &lt;span class=&quot;o&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether4-LAN-Akhwat loop-protect&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;on
&lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt; find default-name&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether5 &lt;span class=&quot;o&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether5-WiFi-Akhwat loop-protect&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;on
&lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt; find default-name&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether6 &lt;span class=&quot;o&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether6-LAN-IT loop-protect&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;on
&lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt; find default-name&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether7 &lt;span class=&quot;o&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether7-WiFi-Streaming loop-protect&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;on
&lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt; find default-name&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether8 &lt;span class=&quot;o&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether8-Lab loop-protect&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;on

&lt;span class=&quot;c&quot;&gt;# 2. IP Addresses&lt;/span&gt;
/ip address
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.10.1/24 &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether2-LAN-Ikhwan
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.20.1/24 &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether3-WiFi-Ikhwan
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.30.1/24 &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether4-LAN-Akhwat
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.40.1/24 &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether5-WiFi-Akhwat
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.1/24 &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether6-LAN-IT
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.60.1/24 &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether7-WiFi-Streaming
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.90.1/24 &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether8-Lab

&lt;span class=&quot;c&quot;&gt;# 3. DHCP Server Setup&lt;/span&gt;
/ip pool
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-ikhwan-lan &lt;span class=&quot;nv&quot;&gt;ranges&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.10.50-192.168.10.254
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-ikhwan-wifi &lt;span class=&quot;nv&quot;&gt;ranges&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.20.50-192.168.20.254
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-akhwat-lan &lt;span class=&quot;nv&quot;&gt;ranges&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.30.50-192.168.30.254
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-akhwat-wifi &lt;span class=&quot;nv&quot;&gt;ranges&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.40.50-192.168.40.254
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-it-lan &lt;span class=&quot;nv&quot;&gt;ranges&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.50-192.168.50.254
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-streaming &lt;span class=&quot;nv&quot;&gt;ranges&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.60.50-192.168.60.254
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-lab &lt;span class=&quot;nv&quot;&gt;ranges&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.90.50-192.168.90.254

/ip dhcp-server
add address-pool&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-ikhwan-lan &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether2-LAN-Ikhwan &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dhcp-ikhwan lease-time&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1h
add address-pool&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-ikhwan-wifi &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether3-WiFi-Ikhwan &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dhcp-ikhwan-wifi lease-time&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1h
add address-pool&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-akhwat-lan &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether4-LAN-Akhwat &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dhcp-akhwat lease-time&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1h
add address-pool&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-akhwat-wifi &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether5-WiFi-Akhwat &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dhcp-akhwat-wifi lease-time&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1h
add address-pool&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-it-lan &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether6-LAN-IT &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dhcp-it lease-time&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1h
add address-pool&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-streaming &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether7-WiFi-Streaming &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dhcp-streaming lease-time&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1h
add address-pool&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pool-lab &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether8-Lab &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dhcp-lab lease-time&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1h

&lt;span class=&quot;c&quot;&gt;# 4. Network Config (Gateway &amp;amp; DNS)&lt;/span&gt;
/ip dhcp-server network
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.10.0/24 &lt;span class=&quot;nv&quot;&gt;gateway&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.10.1 dns-server&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.100
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.20.0/24 &lt;span class=&quot;nv&quot;&gt;gateway&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.20.1 dns-server&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.100
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.30.0/24 &lt;span class=&quot;nv&quot;&gt;gateway&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.30.1 dns-server&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.100
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.40.0/24 &lt;span class=&quot;nv&quot;&gt;gateway&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.40.1 dns-server&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.100
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.0/24 &lt;span class=&quot;nv&quot;&gt;gateway&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.1 dns-server&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.100
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.60.0/24 &lt;span class=&quot;nv&quot;&gt;gateway&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.60.1 dns-server&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.100
add &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.90.0/24 &lt;span class=&quot;nv&quot;&gt;gateway&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.90.1 dns-server&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.100

&lt;span class=&quot;c&quot;&gt;# 5. Enable Internet&lt;/span&gt;
/interface list add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;WAN
/interface list member add &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether1-Internet &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;WAN
/ip dhcp-client add &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether1-Internet &lt;span class=&quot;nv&quot;&gt;disabled&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;no
/ip firewall nat add &lt;span class=&quot;nv&quot;&gt;chain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;srcnat &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;masquerade out-interface&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether1-Internet

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;part-b-security-firewall--adguard-redirection&quot;&gt;Part B: Security, Firewall &amp;amp; AdGuard Redirection&lt;/h3&gt;

&lt;p&gt;Blocks YouTube, Social Media, and forces all DNS traffic to AdGuard.&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# 1. Interface Lists for Security&lt;/span&gt;
/interface list add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;LAN
/interface list add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;TRUSTED
/interface list member add &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether2-LAN-Ikhwan &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;LAN
/interface list member add &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether3-WiFi-Ikhwan &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;LAN
/interface list member add &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether4-LAN-Akhwat &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;LAN
/interface list member add &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether5-WiFi-Akhwat &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;LAN
/interface list member add &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether6-LAN-IT &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;TRUSTED
/interface list member add &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether7-WiFi-Streaming &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;LAN
/interface list member add &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether8-Lab &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;LAN

&lt;span class=&quot;c&quot;&gt;# 2. Block Lists&lt;/span&gt;
/ip firewall layer7-protocol add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;Block_YouTube &lt;span class=&quot;nv&quot;&gt;regexp&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;^.*(youtube.com|ytimg.com|googlevideo.com).*&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\\\$&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;
/ip firewall address-list add &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;sosmed &lt;span class=&quot;nv&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;fb/ig/tiktok&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;31.13.95.35
/ip firewall address-list add &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;sosmed &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;157.240.0.0/16
/ip firewall address-list add &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;sosmed &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;199.96.57.0/24
/ip firewall address-list add &lt;span class=&quot;nv&quot;&gt;list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;sosmed &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;23.48.173.0/24

&lt;span class=&quot;c&quot;&gt;# 3. DNS Redirection (Force AdGuard)&lt;/span&gt;
/ip firewall nat
add &lt;span class=&quot;nv&quot;&gt;chain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dstnat &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dst-nat dst-port&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;53 &lt;span class=&quot;nv&quot;&gt;protocol&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;udp src-address&lt;span class=&quot;o&quot;&gt;=!&lt;/span&gt;192.168.50.100 to-addresses&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.100 to-ports&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;53 &lt;span class=&quot;nv&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Redirect DNS to AdGuard&quot;&lt;/span&gt;
add &lt;span class=&quot;nv&quot;&gt;chain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dstnat &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dst-nat dst-port&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;53 &lt;span class=&quot;nv&quot;&gt;protocol&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;tcp src-address&lt;span class=&quot;o&quot;&gt;=!&lt;/span&gt;192.168.50.100 to-addresses&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.100 to-ports&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;53

&lt;span class=&quot;c&quot;&gt;# 4. Firewall Rules&lt;/span&gt;
/ip firewall filter
add &lt;span class=&quot;nv&quot;&gt;chain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;input &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;accept connection-state&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;established,related
add &lt;span class=&quot;nv&quot;&gt;chain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;input &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;accept &lt;span class=&quot;k&quot;&gt;in&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;-interface-list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;LAN &lt;span class=&quot;nv&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Allow LAN&quot;&lt;/span&gt;
add &lt;span class=&quot;nv&quot;&gt;chain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;input &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;drop &lt;span class=&quot;k&quot;&gt;in&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;-interface-list&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;WAN &lt;span class=&quot;nv&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Block Internet to Router&quot;&lt;/span&gt;
&lt;span class=&quot;c&quot;&gt;# Blocking Rules&lt;/span&gt;
add &lt;span class=&quot;nv&quot;&gt;chain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;forward &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;drop dst-address-list&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;sosmed &lt;span class=&quot;k&quot;&gt;in&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;-interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether3-WiFi-Ikhwan &lt;span class=&quot;nv&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Block Sosmed Ikhwan&quot;&lt;/span&gt;
add &lt;span class=&quot;nv&quot;&gt;chain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;forward &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;drop dst-address-list&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;sosmed &lt;span class=&quot;k&quot;&gt;in&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;-interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether5-WiFi-Akhwat &lt;span class=&quot;nv&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Block Sosmed Akhwat&quot;&lt;/span&gt;
add &lt;span class=&quot;nv&quot;&gt;chain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;forward &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;drop layer7-protocol&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;Block_YouTube &lt;span class=&quot;k&quot;&gt;in&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;-interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether8-Lab &lt;span class=&quot;nv&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Block YouTube Lab&quot;&lt;/span&gt;
add &lt;span class=&quot;nv&quot;&gt;chain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;forward &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;drop &lt;span class=&quot;nv&quot;&gt;protocol&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;udp dst-port&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1194,1701,1723,4500,500 &lt;span class=&quot;nv&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Block VPNs&quot;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;part-c-bandwidth-management-qos&quot;&gt;Part C: Bandwidth Management (QoS)&lt;/h3&gt;

&lt;p&gt;Ensures fairness so one user doesn’t slow down the network.&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;/queue &lt;span class=&quot;nb&quot;&gt;type
&lt;/span&gt;add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pcq-download-500M &lt;span class=&quot;nv&quot;&gt;kind&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pcq pcq-rate&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;500M pcq-classifier&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;dst-address
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pcq-upload-500M &lt;span class=&quot;nv&quot;&gt;kind&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pcq pcq-rate&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;500M pcq-classifier&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;src-address

/queue simple
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;Streaming-Priority &lt;span class=&quot;nv&quot;&gt;target&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether7-WiFi-Streaming max-limit&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;500M/500M &lt;span class=&quot;nv&quot;&gt;priority&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1/8
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;Lab &lt;span class=&quot;nv&quot;&gt;target&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether8-Lab max-limit&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1G/1G
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;IT-Unlimited &lt;span class=&quot;nv&quot;&gt;target&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether6-LAN-IT max-limit&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;500M/500M
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;Ikhwan-Fair &lt;span class=&quot;nv&quot;&gt;target&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether3-WiFi-Ikhwan max-limit&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;200M/200M &lt;span class=&quot;nv&quot;&gt;queue&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pcq-upload-500M/pcq-download-500M
add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;Akhwat-Fair &lt;span class=&quot;nv&quot;&gt;target&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;ether5-WiFi-Akhwat max-limit&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;200M/200M &lt;span class=&quot;nv&quot;&gt;queue&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;pcq-upload-500M/pcq-download-500M

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;part-d-adguard-dns-failover&quot;&gt;Part D: AdGuard DNS Failover&lt;/h3&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;/tool netwatch add &lt;span class=&quot;nv&quot;&gt;host&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.100 &lt;span class=&quot;nv&quot;&gt;interval&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;30s up-script&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;AdGuardUp down-script&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;AdGuardDown
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;or via &lt;strong&gt;WinBox&lt;/strong&gt;:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;Tools&lt;/strong&gt; → &lt;strong&gt;Netwatch&lt;/strong&gt; → &lt;strong&gt;Add (+)&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Isi &lt;strong&gt;Host&lt;/strong&gt;: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;192.168.50.100&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Interval&lt;/strong&gt;: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;30s&lt;/code&gt; (as your needed)&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Up Script&lt;/strong&gt;: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;AdGuardUp&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Down Script&lt;/strong&gt;: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;AdGuardDown&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;OK&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;/system script add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;AdGuardUp &lt;span class=&quot;nb&quot;&gt;source&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;
/ip firewall filter enable [find where comment~&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;Block DNS&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;];&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\n\&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;
/ip firewall nat enable [find where comment~&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;Redirect DNS&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;];&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\n\&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;
/log info &lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;AdGuard UP - Firewall &amp;amp; NAT diaktifkan&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;/system script add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;AdGuardDown &lt;span class=&quot;nb&quot;&gt;source&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;
/ip firewall filter disable [find where comment~&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;Block DNS&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;];&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\n\&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;
/ip firewall nat disable [find where comment~&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;Redirect DNS&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;];&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\n\&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;
/log warning &lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;AdGuard DOWN - Firewall &amp;amp; NAT dimatikan&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;/ip firewall filter &lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt;find where &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;drop dst-port&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;53] &lt;span class=&quot;nv&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Block DNS&quot;&lt;/span&gt;
/ip firewall nat &lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt;find where &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;redirect dst-port&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;53] &lt;span class=&quot;nv&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Redirect DNS&quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Make sure script run as well :&lt;/p&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;/system script run AdGuardUp
/system script run AdGuardDown
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Should print :&lt;/p&gt;

&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;/log print where message~&lt;span class=&quot;s2&quot;&gt;&quot;AdGuard&quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;✅ When it &lt;strong&gt;UP&lt;/strong&gt;, firewall dan NAT aktif.&lt;br /&gt;
❌ When it &lt;strong&gt;DOWN&lt;/strong&gt;, firewall dan NAT nonaktif.&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;3-unifi-access-point-setup-wifi&quot;&gt;3. Unifi Access Point Setup (WiFi)&lt;/h2&gt;

&lt;p&gt;Since the Mikrotik handles the routing, the Unifi APs act purely as antennas.&lt;/p&gt;

&lt;h3 id=&quot;hardware-connection&quot;&gt;Hardware Connection:&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;Connect &lt;strong&gt;AP Ikhwan&lt;/strong&gt; to &lt;strong&gt;Ethernet Port 3&lt;/strong&gt; on Mikrotik.&lt;/li&gt;
  &lt;li&gt;Connect &lt;strong&gt;AP Akhwat&lt;/strong&gt; to &lt;strong&gt;Ethernet Port 5&lt;/strong&gt; on Mikrotik.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;software-setup-the-controller&quot;&gt;Software Setup (The Controller):&lt;/h3&gt;

&lt;p&gt;You need to configure the APs once. You can use the Unifi App on your phone or install the Controller on a Windows PC (Laptop).&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Download&lt;/strong&gt;: Get the “UniFi Network Server” from &lt;a href=&quot;https://ui.com/download&quot;&gt;ui.com/download&lt;/a&gt;.&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Install &amp;amp; Run&lt;/strong&gt;: Open the program and click “Launch a Browser to Manage the Network”.&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Adoption&lt;/strong&gt;:
    &lt;ul&gt;
      &lt;li&gt;Plug your Laptop into &lt;strong&gt;Port 6 (IT)&lt;/strong&gt; of the Mikrotik.&lt;/li&gt;
      &lt;li&gt;The Unifi software should see the APs as “Pending Adoption”.&lt;/li&gt;
      &lt;li&gt;Click &lt;strong&gt;Adopt&lt;/strong&gt;.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;WiFi Configuration&lt;/strong&gt;:
    &lt;ul&gt;
      &lt;li&gt;Go to &lt;strong&gt;Settings &amp;gt; WiFi &amp;gt; Create New&lt;/strong&gt;.&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;SSID Name&lt;/strong&gt;: e.g., “Syathiby @ ikhwan”, “SyathibyNet”.&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Password&lt;/strong&gt;: Set your secure password.&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Important&lt;/strong&gt;: Since we physically separated the ports on Mikrotik (Port 3 and Port 5), you can just set up standard SSIDs. The AP plugged into Port 3 will automatically give out “Ikhwan” IP addresses (192.168.20.x).&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;But sometime UniFi devices (APs, switches) cannot be adopted when they’re on different network segments than the controller.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Solution Steps:&lt;/strong&gt;&lt;/p&gt;

&lt;h3 id=&quot;step-1-factory-reset-the-unifi-device-if-you-forgot-the-ssh-account&quot;&gt;&lt;strong&gt;Step 1: Factory Reset the UniFi Device (if you forgot the ssh account)&lt;/strong&gt;&lt;/h3&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Physical Reset&lt;/strong&gt;: Locate the reset button on the device
    &lt;ul&gt;
      &lt;li&gt;Press and hold for 5-10 seconds until LEDs indicate reset&lt;/li&gt;
      &lt;li&gt;Device will reboot with default settings&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;step-2-ssh-access-to-unifi-device&quot;&gt;&lt;strong&gt;Step 2: SSH Access to UniFi Device&lt;/strong&gt;&lt;/h3&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Find Device IP&lt;/strong&gt;: Check your DHCP server or MikroTik log or use network scanner&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;SSH Connection&lt;/strong&gt;: Use terminal/Putty to connect:
    &lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;ssh ubnt@[device-ip]
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
    &lt;p&gt;Default credentials:&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;Username: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;ubnt&lt;/code&gt;&lt;/li&gt;
      &lt;li&gt;Password: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;ubnt&lt;/code&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;step-3-manual-inform-url-configuration&quot;&gt;&lt;strong&gt;Step 3: Manual Inform URL Configuration&lt;/strong&gt;&lt;/h3&gt;
&lt;p&gt;Once logged in via SSH, set the controller inform URL:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Set Controller IP/Address&lt;/strong&gt;:
    &lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;set-inform http://[controller-ip]:8080/inform
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
    &lt;p&gt;Example for controller at 192.168.50.100:&lt;/p&gt;
    &lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;set-inform http://192.168.50.100:8080/inform
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Verify Setting&lt;/strong&gt; (optional):
    &lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;info
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Apply and Test&lt;/strong&gt;:
    &lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;set-inform http://[controller-ip]:8080/inform
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
    &lt;p&gt;Run this command twice to ensure persistence&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;step-4-network-configuration-if-needed&quot;&gt;&lt;strong&gt;Step 4: Network Configuration (If Needed)&lt;/strong&gt;&lt;/h3&gt;
&lt;p&gt;If the device needs specific network settings:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Set Static IP&lt;/strong&gt; (optional):
    &lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;set-inform http://[controller-ip]:8080/inform
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Configure Network Mode&lt;/strong&gt;:
    &lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;set-default
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;step-5-controller-side-adoption&quot;&gt;&lt;strong&gt;Step 5: Controller-Side Adoption&lt;/strong&gt;&lt;/h3&gt;
&lt;ol&gt;
  &lt;li&gt;Return to UniFi Controller interface&lt;/li&gt;
  &lt;li&gt;The device should now appear for adoption&lt;/li&gt;
  &lt;li&gt;Click “Adopt” and wait for provisioning&lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;step-6-verify-and-troubleshoot&quot;&gt;&lt;strong&gt;Step 6: Verify and Troubleshoot&lt;/strong&gt;&lt;/h3&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Check Adoption Status&lt;/strong&gt;:
    &lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;mca-cli
info
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Common Issues &amp;amp; Fixes&lt;/strong&gt;:
    &lt;ul&gt;
      &lt;li&gt;&lt;strong&gt;Firewall Rules&lt;/strong&gt;: Ensure port 8080/TCP and 3478/UDP are open&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;L3 Adoption&lt;/strong&gt;: Enable “Override inform host” in Controller Settings&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;DNS Resolution&lt;/strong&gt;: Ensure device can resolve controller hostname&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;alternative-method-dhcp-option-43&quot;&gt;&lt;strong&gt;Alternative Method: DHCP Option 43&lt;/strong&gt;&lt;/h3&gt;
&lt;p&gt;For enterprise deployments, configure DHCP server (like MikroTik):&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MikroTik Configuration&lt;/strong&gt;:&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;/ip dhcp-server option
add &lt;span class=&quot;nv&quot;&gt;code&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;43 &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;unifi &lt;span class=&quot;nv&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;0x0104C0A83264  &lt;span class=&quot;c&quot;&gt;# Hex of controller IP (192.168.50.100)&lt;/span&gt;
/ip dhcp-server network
&lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt;find &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.1.0/24] dhcp-option&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;unifi
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;permanent-solution-considerations&quot;&gt;&lt;strong&gt;Permanent Solution Considerations&lt;/strong&gt;&lt;/h3&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Network Design&lt;/strong&gt;: Ensure UniFi devices and controller are on same VLAN or have proper routing&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Controller Hosting&lt;/strong&gt;: Consider cloud-hosted controller for distributed deployments&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;DNS Records&lt;/strong&gt;: Create &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;unifi&lt;/code&gt; or &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;unifi-controller&lt;/code&gt; A record in local DNS (AdGuard Home)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This SSH-based manual adoption method bypasses network segmentation issues by directly telling the device where to find the controller, effectively solving cross-subnet adoption problems.&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;4-adguard-home-installation-on-router&quot;&gt;4. AdGuard Home Installation (On Router)&lt;/h2&gt;

&lt;p&gt;We will run the AdBlocker &lt;em&gt;inside&lt;/em&gt; the Mikrotik router (Container).&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Format USB&lt;/strong&gt;: Plug a USB stick into the MikroTik. Go to &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;System &amp;gt; Disks&lt;/code&gt;, select it, and click &lt;strong&gt;Format&lt;/strong&gt; (Choose EXT4).&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Enable Container Mode&lt;/strong&gt;:
Open Terminal and type:
&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/system/device-mode/update container=yes&lt;/code&gt;
&lt;em&gt;You must physically press the Mode button or unplug/replug power when asked.&lt;/em&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Install AdGuard&lt;/strong&gt;:
Copy-paste this script into Terminal:&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# Network Interface for Container&lt;/span&gt;
/interface veth add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;veth-adguard &lt;span class=&quot;nv&quot;&gt;address&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.100/24 &lt;span class=&quot;nv&quot;&gt;gateway&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;192.168.50.1
/interface bridge port add &lt;span class=&quot;nv&quot;&gt;bridge&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;bridge1 &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;veth-adguard

&lt;span class=&quot;c&quot;&gt;# Configure Registry&lt;/span&gt;
/container config &lt;span class=&quot;nb&quot;&gt;set &lt;/span&gt;registry-url&lt;span class=&quot;o&quot;&gt;=[&lt;/span&gt;https://registry-1.docker.io]&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;https://registry-1.docker.io&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;tmpdir&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;usb1/pull

&lt;span class=&quot;c&quot;&gt;# Download &amp;amp; Start AdGuard&lt;/span&gt;
/container add remote-image&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;adguard/adguardhome:latest &lt;span class=&quot;nv&quot;&gt;interface&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;veth-adguard root-dir&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;usb1/adguard &lt;span class=&quot;nv&quot;&gt;logging&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;yes&lt;/span&gt;
/container start &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt;find tag~&lt;span class=&quot;s2&quot;&gt;&quot;adguard&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Setup Wizard&lt;/strong&gt;:
    &lt;ul&gt;
      &lt;li&gt;Open your browser: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;http://192.168.50.100:3000&lt;/code&gt;&lt;/li&gt;
      &lt;li&gt;Click “Get Started”.&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Admin Web Interface&lt;/strong&gt;: Port 80.&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;DNS Server&lt;/strong&gt;: Port 53.&lt;/li&gt;
      &lt;li&gt;Finish setup. Now your router will send all ads here to be blocked.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You can also manual install on PC or Raspberry Pi (the cheap one is Pi Zero 2W) by download the AdGuardHome software on &lt;a href=&quot;https://github.com/AdguardTeam/AdGuardHome&quot;&gt;github.com/AdguardTeam/AdGuardHome&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Installation Steps:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Download the AMD64 version (for me win11 64bit)&lt;/li&gt;
  &lt;li&gt;Extract to the C: drive root directory&lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Open Command Prompt as Administrator and navigate to the directory:&lt;/p&gt;

    &lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;cd c:\AdGuardHome
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Install and start the service:&lt;/p&gt;

    &lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;AdGuardHome.exe -s install
AdGuardHome.exe -s start
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Windows Firewall Configuration (Post-Update):&lt;/strong&gt;
Windows Updates frequently reset inbound firewall rules, potentially blocking external connections to AdGuard Home’s DNS port (53).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Solution: Configure Windows Defender Firewall&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;On the host machine (e.g., 192.168.50.100):&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;Open &lt;strong&gt;Windows Defender Firewall with Advanced Security&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Navigate to &lt;strong&gt;Inbound Rules&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Verify there are existing rules &lt;strong&gt;Allowing&lt;/strong&gt; incoming traffic on &lt;strong&gt;Port 53&lt;/strong&gt; for both &lt;strong&gt;UDP&lt;/strong&gt; and &lt;strong&gt;TCP&lt;/strong&gt; protocols&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;If rules are missing, create them:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;Click &lt;strong&gt;New Rule…&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Select &lt;strong&gt;Port&lt;/strong&gt; → &lt;strong&gt;Next&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Choose &lt;strong&gt;UDP&lt;/strong&gt; and &lt;strong&gt;TCP&lt;/strong&gt; (create separate rules for each)&lt;/li&gt;
  &lt;li&gt;Enter &lt;strong&gt;53&lt;/strong&gt; in “Specific local ports” → &lt;strong&gt;Next&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Select &lt;strong&gt;Allow the connection&lt;/strong&gt; → &lt;strong&gt;Next&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Apply to all profiles (Domain, Private, Public) → &lt;strong&gt;Next&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Name: “AdGuard Home DNS (Port 53)” → &lt;strong&gt;Finish&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Important Notes:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;Ensure these rules permit traffic from your local subnet (or at minimum, from your MikroTik router’s IP)&lt;/li&gt;
  &lt;li&gt;Confirm there are no conflicting &lt;strong&gt;Deny&lt;/strong&gt; rules specifically blocking Port 53&lt;/li&gt;
  &lt;li&gt;After major Windows updates, verify these rules remain active and readjust if necessary&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For reference about backup AdGuardHome settings you can visit : &lt;a href=&quot;https://github.com/syathiby/AdGuardHome-configs&quot;&gt;github.com/syathiby/AdGuardHome-configs&lt;/a&gt;&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;5-zerotier-setup-remote-access&quot;&gt;5. ZeroTier Setup (Remote Access)&lt;/h2&gt;

&lt;p&gt;Access your home network from anywhere in the world. (check my youtube video above for detail installations)&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Create Account&lt;/strong&gt;: Go to &lt;a href=&quot;https://zerotier.com&quot;&gt;ZeroTier.com&lt;/a&gt; and create a Network. Copy the &lt;strong&gt;Network ID&lt;/strong&gt;.&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Mikrotik Setup&lt;/strong&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;/zerotier &lt;span class=&quot;nb&quot;&gt;set &lt;/span&gt;zt1 &lt;span class=&quot;nv&quot;&gt;disabled&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;no
/zerotier interface add &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;zerotier1 &lt;span class=&quot;nv&quot;&gt;instance&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;zt1 &lt;span class=&quot;nv&quot;&gt;network&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&amp;lt;PASTE_YOUR_NETWORK_ID_HERE&amp;gt; allow-managed&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;yes &lt;/span&gt;allow-global&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;yes&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Authorize&lt;/strong&gt;:
    &lt;ul&gt;
      &lt;li&gt;Go back to ZeroTier website.&lt;/li&gt;
      &lt;li&gt;Scroll to “Members”. You will see your Mikrotik router.&lt;/li&gt;
      &lt;li&gt;Check the box &lt;strong&gt;“Auth”&lt;/strong&gt;.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Firewall Rules&lt;/strong&gt;:
(Already included in the Mikrotik Config above, specifically the “Allow ZeroTier” rules).&lt;/li&gt;
&lt;/ol&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;6-ssh-windows-setup&quot;&gt;6. SSH Windows Setup&lt;/h2&gt;

&lt;p&gt;If you have a PC at home you want to control remotely via ZeroTier.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;On the Windows PC&lt;/strong&gt;:
    &lt;ul&gt;
      &lt;li&gt;Go to &lt;strong&gt;Settings &amp;gt; System &amp;gt; Optional Features&lt;/strong&gt;.&lt;/li&gt;
      &lt;li&gt;Click “View features” -&amp;gt; Search for &lt;strong&gt;OpenSSH Server&lt;/strong&gt; -&amp;gt; Install.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Start Service&lt;/strong&gt;:
    &lt;ul&gt;
      &lt;li&gt;Open PowerShell as Administrator.&lt;/li&gt;
      &lt;li&gt;Run: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Start-Service sshd&lt;/code&gt;&lt;/li&gt;
      &lt;li&gt;Run: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Set-Service -Name sshd -StartupType &apos;Automatic&apos;&lt;/code&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Connect Remotely&lt;/strong&gt;:
    &lt;ul&gt;
      &lt;li&gt;Install ZeroTier on your remote laptop and join the same network.&lt;/li&gt;
      &lt;li&gt;Open CMD/Terminal: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;ssh username@&amp;lt;Windows_ZeroTier_IP&amp;gt;&lt;/code&gt; or you can ssh the broadcasted local IP.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;7-quick-tutorial-access-files-remotely-with-file-browser--ngrok&quot;&gt;7. Quick Tutorial: Access Files Remotely with File Browser &amp;amp; Ngrok&lt;/h2&gt;

&lt;h3 id=&quot;part-a--file-browser&quot;&gt;Part A : File Browser&lt;/h3&gt;

&lt;h4 id=&quot;download--configure-file-browser&quot;&gt;Download &amp;amp; Configure File Browser&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;Download File Browser from &lt;a href=&quot;https://filebrowser.org/&quot;&gt;filebrowser.org&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;Extract to your preferred location (e.g., &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;C:\FileBrowser\&lt;/code&gt;)&lt;/li&gt;
  &lt;li&gt;Open Command Prompt as Administrator&lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;start-file-browser-service&quot;&gt;Start File Browser Service&lt;/h4&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# Navigate to File Browser directory&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;cd &lt;/span&gt;C:&lt;span class=&quot;se&quot;&gt;\F&lt;/span&gt;ileBrowser

&lt;span class=&quot;c&quot;&gt;# Start File Browser&lt;/span&gt;
filebrowser.exe &lt;span class=&quot;nt&quot;&gt;-a&lt;/span&gt; 0.0.0.0 &lt;span class=&quot;nt&quot;&gt;-p&lt;/span&gt; 1345 &lt;span class=&quot;nt&quot;&gt;-r&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;D:&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\S&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;erver File&quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Parameters Explained:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;-a 0.0.0.0&lt;/code&gt; → Listen on all network interfaces&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;-p 1345&lt;/code&gt; → Use port 1345&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;-r &quot;D:\Server File&quot;&lt;/code&gt; → Root directory to share&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;File Browser will be accessible locally at &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;http://localhost:1345&lt;/code&gt;&lt;/p&gt;

&lt;h3 id=&quot;part-b--configure-ngrok-for-remote-access&quot;&gt;Part B : Configure Ngrok for Remote Access&lt;/h3&gt;

&lt;h4 id=&quot;install--authenticate-ngrok&quot;&gt;Install &amp;amp; Authenticate Ngrok&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;Download Ngrok from &lt;a href=&quot;https://ngrok.com/&quot;&gt;ngrok.com&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;Open PowerShell as Administrator&lt;/li&gt;
  &lt;li&gt;Add your authtoken:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class=&quot;language-powershell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;ngrok&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;config&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;add-authtoken&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;32yBYGkc0aRMZUQfmV57tHHqrJc_3G9du3dGfiVaLhcRzTTtc&lt;/span&gt;&lt;span class=&quot;w&quot;&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Authtoken saved to configuration file: C:\Users\CreatorB\AppData\Local/ngrok/ngrok.yml&lt;/p&gt;

&lt;h3 id=&quot;create-secure-tunnel&quot;&gt;Create Secure Tunnel&lt;/h3&gt;
&lt;div class=&quot;language-powershell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# Create tunnel to port 1345&lt;/span&gt;&lt;span class=&quot;w&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;ngrok&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;http&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;1345&lt;/span&gt;&lt;span class=&quot;w&quot;&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Ngrok will display a public URL (e.g., &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;https://abc123.ngrok.io&lt;/code&gt;) that tunnels to your local File Browser.&lt;/p&gt;

&lt;h3 id=&quot;part-c--access-files-remotely&quot;&gt;Part C : Access Files Remotely&lt;/h3&gt;

&lt;h4 id=&quot;first-time-setup-via-local-network&quot;&gt;First-Time Setup (via Local Network)&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;Open browser and go to &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;http://[local-ip]:1345&lt;/code&gt; (e.g., &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;http://192.168.50.100:1345&lt;/code&gt;)&lt;/li&gt;
  &lt;li&gt;Create admin username and password when prompted&lt;/li&gt;
  &lt;li&gt;Configure additional settings as needed&lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;remote-access-setup&quot;&gt;Remote Access Setup&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Via Ngrok URL:&lt;/strong&gt; Access &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;https://your-ngrok-url.ngrok.io&lt;/code&gt; from any device with internet&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Via ZeroTier/VPN:&lt;/strong&gt; If using ZeroTier, use your ZeroTier IP instead (more secure)&lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;part-d--security-recommendations&quot;&gt;Part D : Security Recommendations&lt;/h3&gt;

&lt;h4 id=&quot;essential-security-steps&quot;&gt;Essential Security Steps:&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Strong Password:&lt;/strong&gt; Use a complex password in File Browser settings&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;HTTPS Only:&lt;/strong&gt; In File Browser settings, enable HTTPS or use reverse proxy&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Restrict Access:&lt;/strong&gt;
    &lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# Allow only specific IP (optional)&lt;/span&gt;
filebrowser.exe config &lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;--auth&lt;/span&gt;.method&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;proxy
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;windows-firewall-rules&quot;&gt;Windows Firewall Rules:&lt;/h4&gt;
&lt;p&gt;Ensure port 1345 is allowed in Windows Firewall:&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;Open Windows Defender Firewall&lt;/li&gt;
  &lt;li&gt;Create Inbound Rule for port 1345 (TCP)&lt;/li&gt;
  &lt;li&gt;Restrict to private network only&lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;part-e--advanced-persistent-service-setup&quot;&gt;Part E : Advanced: Persistent Service Setup&lt;/h3&gt;

&lt;h4 id=&quot;create-windows-service-optional&quot;&gt;Create Windows Service (Optional)&lt;/h4&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# Download NSSM (Non-Sucking Service Manager)&lt;/span&gt;
&lt;span class=&quot;c&quot;&gt;# Run as Administrator:&lt;/span&gt;
nssm &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;FileBrowser &lt;span class=&quot;s2&quot;&gt;&quot;C:&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\F&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;ileBrowser&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\f&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;ilebrowser.exe&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-a&lt;/span&gt; 0.0.0.0 &lt;span class=&quot;nt&quot;&gt;-p&lt;/span&gt; 1345 &lt;span class=&quot;nt&quot;&gt;-r&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;D:&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\S&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;erver File&quot;&lt;/span&gt;

&lt;span class=&quot;c&quot;&gt;# Start the service&lt;/span&gt;
net start FileBrowser
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h4 id=&quot;auto-start-with-windows&quot;&gt;Auto-start with Windows:&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;Create a shortcut to the command in Startup folder&lt;/li&gt;
  &lt;li&gt;Or use Task Scheduler to run on boot&lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;part-f--troubleshooting&quot;&gt;Part F : Troubleshooting&lt;/h3&gt;

&lt;h4 id=&quot;common-issues&quot;&gt;Common Issues:&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;“Connection Refused”&lt;/strong&gt; → Check File Browser is running and firewall allows port 1345&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Ngrok Tunnel Fails&lt;/strong&gt; → Verify ngrok authtoken is valid&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Cannot Login&lt;/strong&gt; → Reset File Browser config:
    &lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;filebrowser.exe &lt;span class=&quot;nb&quot;&gt;users rm &lt;/span&gt;admin
filebrowser.exe &lt;span class=&quot;nb&quot;&gt;users &lt;/span&gt;add admin newpassword &lt;span class=&quot;nt&quot;&gt;--perm&lt;/span&gt;.admin
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;verify-connections&quot;&gt;Verify Connections:&lt;/h4&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# Check if port is listening&lt;/span&gt;
netstat &lt;span class=&quot;nt&quot;&gt;-ano&lt;/span&gt; | findstr &lt;span class=&quot;s2&quot;&gt;&quot;1345&quot;&lt;/span&gt;

&lt;span class=&quot;c&quot;&gt;# Test local access&lt;/span&gt;
curl http://localhost:1345
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h4 id=&quot;quick-start-script&quot;&gt;Quick Start Script&lt;/h4&gt;
&lt;p&gt;Create a batch file &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;start-filebrowser.bat&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&quot;language-batch highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;@echo &lt;span class=&quot;na&quot;&gt;off&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;cd&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;/d &lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;C&lt;/span&gt;:\FileBrowser
&lt;span class=&quot;nb&quot;&gt;start&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;filebrowser&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;.exe&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;-a &lt;/span&gt;&lt;span class=&quot;m&quot;&gt;0&lt;/span&gt;.0.0.0 &lt;span class=&quot;na&quot;&gt;-p &lt;/span&gt;&lt;span class=&quot;m&quot;&gt;1345&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;-r &lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;D:\Server File&quot;&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;timeout&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;/t &lt;/span&gt;&lt;span class=&quot;m&quot;&gt;5&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;cd&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;C&lt;/span&gt;:\laragon\www
&lt;span class=&quot;nb&quot;&gt;start&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;ngrok&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;http&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;1345&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; For production use, consider setting up proper authentication, SSL certificates, and access controls rather than relying solely on Ngrok for security.&lt;/p&gt;

&lt;p&gt;You can also use tightvnc with zerotier or some remote desktop Chrome Remote Desktop (with password), attended mode for Rustdesk (free your own server), Anydesk, TeamViewer, etc.&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;8-zkteco-fingerprint-device-reset-method&quot;&gt;8. ZKTeco Fingerprint Device Reset Method&lt;/h2&gt;

&lt;h4 id=&quot;time-based-password-calculation&quot;&gt;&lt;strong&gt;Time-Based Password Calculation&lt;/strong&gt;&lt;/h4&gt;

&lt;p&gt;For ZKTeco fingerprint devices that use time-based reset passwords, follow this formula:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;Get Current Time&lt;/strong&gt; in 24-hour format (HHMM)
    &lt;ul&gt;
      &lt;li&gt;Example: Current time is 14:30 → &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;1430&lt;/code&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Calculate Reset Password&lt;/strong&gt;:
    &lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;9999 - (Current Time HHMM) = N
N × N = Password
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;step-by-step-reset-procedure&quot;&gt;&lt;strong&gt;Step-by-Step Reset Procedure&lt;/strong&gt;&lt;/h4&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;On the Fingerprint Device&lt;/strong&gt;:
    &lt;ul&gt;
      &lt;li&gt;Access the device’s menu or settings&lt;/li&gt;
      &lt;li&gt;When prompted for a password, enter: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;8888&lt;/code&gt;&lt;/li&gt;
      &lt;li&gt;You’ll be asked for a “super password” or “reset password”&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Calculate the Password&lt;/strong&gt;:
    &lt;ul&gt;
      &lt;li&gt;Let’s say current time is &lt;strong&gt;14:30&lt;/strong&gt; (2:30 PM)&lt;/li&gt;
      &lt;li&gt;Calculation:
        &lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;9999 - 1430 = 8569
8569 × 8569 = 73,427,761
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;Password: &lt;strong&gt;73427761&lt;/strong&gt; (use last 8 digits if longer)&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Enter the Password&lt;/strong&gt;:
    &lt;ul&gt;
      &lt;li&gt;Type the calculated 8-digit password&lt;/li&gt;
      &lt;li&gt;Device should grant access to reset/configuration menu&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;important-notes&quot;&gt;&lt;strong&gt;Important Notes&lt;/strong&gt;&lt;/h4&gt;

&lt;p&gt;⚠️ &lt;strong&gt;Critical Considerations&lt;/strong&gt;:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;Time Synchronization&lt;/strong&gt;: Device time must be accurate for this to work&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Quick Calculation&lt;/strong&gt;: Do the math quickly; if time changes, recalculate&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;8-Digit Limit&lt;/strong&gt;: Use only the last 8 digits if result exceeds 8 digits&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Model Variations&lt;/strong&gt;: Some ZKTeco models use different methods:
    &lt;ul&gt;
      &lt;li&gt;Try &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;9999&lt;/code&gt; or &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;0000&lt;/code&gt; as default passwords&lt;/li&gt;
      &lt;li&gt;Some use: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;9999 - HHMMSS&lt;/code&gt; (including seconds)&lt;/li&gt;
      &lt;li&gt;Others: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;HHMM × HHMM&lt;/code&gt; then subtract from 9999&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;summary&quot;&gt;Summary&lt;/h2&gt;

&lt;p&gt;Now you will have a network that is safe from lightning, separated by user groups, blocks ads automatically, and can be managed from anywhere in the world.&lt;/p&gt;

&lt;p&gt;I will periodically update this handbook with beneficial stuff inshaAllah, If you have another tips or corrections, feel free to commit your change and create PR on &lt;a href=&quot;https://github.com/creatorbe/creatorbe.github.io/blob/master/_posts/2013-12-04-cbcs-creatorb-cheatsheet-creatorbe.md&quot;&gt;Our GitHub Page&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;اَللّٰهُ أَعْلَم&lt;/p&gt;

&lt;hr /&gt;

&lt;h4 id=&quot;al-faqiir-ilaa-rahmatillahi-taala&quot;&gt;&lt;em&gt;al-faqiir ilaa rahmatillahi ta’ala&lt;/em&gt;&lt;/h4&gt;

&lt;p&gt;✍︎ Hasan B&lt;/p&gt;

&lt;p&gt;◉ Ma’had Tahfizh Al-Qur’an Al-Imam Asy-Syathiby, Bogor, Cileungsi.&lt;/p&gt;

&lt;p&gt;◴ Itsnayn, 12 Jumadil Awal 1447 H&lt;/p&gt;
</description>
        <pubDate>Mon, 03 Nov 2025 16:00:00 +0000</pubDate>
        <link>https://creatorbe.github.io/fullstack-it/2025/11/03/it-infrastructure-handbook.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/fullstack-it/2025/11/03/it-infrastructure-handbook.html</guid>
        
        
        <category>fullstack-it</category>
        
      </item>
    
      <item>
        <title>Fix Windows Cannot Access Network Shared Folder</title>
        <description>&lt;p&gt;بِسْــــــــــــــــــمِ اللهِ الرَّحْمَنِ الرَّحِيْمِ&lt;/p&gt;

&lt;p&gt;اَلْحَمْدُ للّٰهِ رَبِّ العَالَمِيْنَ والعاقبة للمتقين&lt;/p&gt;

&lt;p&gt;وَالصَّلاَةُ وَالسَّلَامُ عَلىَ إمام الْمُرْسَلِيْنَ،نبيين مُحَمَّدٍ وَعَلَى اٰلِهِ وَصَحْبِهِ اَجْمَعِيْنَ&lt;/p&gt;

&lt;p&gt;اللّهُمَّ إِنِّيْ أَعُوْذُ بِكَ مِنْ عِلْمٍ لاَ يَنْفَعُ، وَمِنْ قَلْبٍ لاَ يَخْشَعُ، وَمِنْ نَفْسٍ لاَ تَشْبَعُ، وَمِنْ دَعْوَةٍ لاَ يُسْتَجَابُ لَهَا&lt;/p&gt;

&lt;p&gt;اَمَّا بَعْدُ&lt;/p&gt;

&lt;h3 id=&quot;hadith-intro---chapter-health-and-leisure&quot;&gt;Hadith Intro - Chapter: Health and leisure&lt;/h3&gt;

&lt;p&gt;باب مَا جَاءَ فِي الرِّقَاقِ وَأَنْ لاَ عَيْشَ إِلاَّ عَيْشُ الآخِرَةِ&lt;/p&gt;

&lt;p&gt;نِعْمَتَانِ مَغْبُونٌ فِيهِمَا كَثِيرٌ مِنَ النَّاسِ، الصِّحَّةُ وَالْفَرَاغُ&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;The Prophet (ﷺ) said: “There are two blessings that many people are deceived into losing: health and free time.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
  &lt;p&gt;Ibn Al-Jawzi (رحمه الله) said:
 “It happens that a person has good health, but does not have free time because of his being engaged in earning his livelihood; or he is rich but has no good health. So, if these two (good health and free time) are gathered in a person, but laziness overtakes him from fulfilling his duties, then he is a loser.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;الحمد لله على كل حال و نسأل الله السلامة والعافية&lt;/p&gt;

&lt;p&gt;‏اللهَ أَرْجُو أن يشفيكم ويجعلكم من الأبناء الصالحين&lt;/p&gt;

&lt;p&gt;اللهم آمين&lt;/p&gt;

&lt;h1 id=&quot;step-by-step-fixing-error-windows-shared-folder&quot;&gt;Step by step fixing error windows shared folder&lt;/h1&gt;

&lt;p&gt;Are you trying to access a shared folder on your local network (like &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;\\192.168.50.100\Server File&lt;/code&gt;) but getting errors like:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;em&gt;“The network path was not found”&lt;/em&gt;&lt;/li&gt;
  &lt;li&gt;&lt;em&gt;“Access is denied”&lt;/em&gt;&lt;/li&gt;
  &lt;li&gt;&lt;em&gt;“System error 53 has occurred”&lt;/em&gt;&lt;/li&gt;
  &lt;li&gt;&lt;em&gt;“You might not have permission to use this network resource”&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Even though other computers can access it just fine?&lt;/p&gt;

&lt;p&gt;You’re not alone. This is a &lt;strong&gt;common issue in Windows 10 and 11&lt;/strong&gt;, especially when connecting to older servers, NAS devices, or local machines with guest sharing enabled.&lt;/p&gt;

&lt;p&gt;In this guide, I’ll walk you through &lt;strong&gt;both manual and automatic solutions&lt;/strong&gt; to fix SMB (Server Message Block) access problems — including a powerful &lt;strong&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;fix-smb.bat&lt;/code&gt; script&lt;/strong&gt; that resolves most issues in one click.&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;why-this-happens&quot;&gt;Why This Happens&lt;/h2&gt;

&lt;p&gt;Microsoft has hardened Windows security over the years, and by default, &lt;strong&gt;Windows blocks insecure SMB connections&lt;/strong&gt;, such as:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Accessing shared folders without a password (guest access)&lt;/li&gt;
  &lt;li&gt;Connecting to servers that don’t support SMB signing&lt;/li&gt;
  &lt;li&gt;Using outdated SMBv1 (though not recommended)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;While this improves security, it often &lt;strong&gt;breaks access to local network shares&lt;/strong&gt; in trusted environments like home or office LANs.&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;solution-1-manual-fix-step-by-step&quot;&gt;Solution 1: Manual Fix (Step-by-Step)&lt;/h2&gt;

&lt;p&gt;Follow these steps carefully to re-enable access to shared folders.&lt;/p&gt;

&lt;h3 id=&quot;1-reset-winsock--tcpip-stack&quot;&gt;1. Reset Winsock &amp;amp; TCP/IP Stack&lt;/h3&gt;

&lt;p&gt;This clears any corrupted network configurations.&lt;/p&gt;

&lt;p&gt;Open &lt;strong&gt;Command Prompt as Administrator&lt;/strong&gt; and run:&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-cmd&quot;&gt;netsh winsock reset
netsh int ip reset
ipconfig /release
ipconfig /renew
ipconfig /flushdns
&lt;/code&gt;&lt;/pre&gt;

&lt;blockquote&gt;
  &lt;p&gt;&lt;strong&gt;Restart your computer&lt;/strong&gt; after running these commands.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;hr /&gt;

&lt;h3 id=&quot;2-re-enable-smb-10cifs-client&quot;&gt;2. Re-enable SMB 1.0/CIFS Client&lt;/h3&gt;

&lt;p&gt;Even if it’s already checked, re-enable it to ensure it’s properly loaded.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Open &lt;strong&gt;Control Panel &amp;gt; Programs &amp;gt; Turn Windows features on or off&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Uncheck:
    &lt;ul&gt;
      &lt;li&gt;☐ SMB 1.0/CIFS File Sharing Support&lt;/li&gt;
      &lt;li&gt;☐ SMB 1.0/CIFS Client&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Click &lt;strong&gt;OK&lt;/strong&gt; → &lt;strong&gt;Restart&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;After restart, re-enable both options&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Restart again&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;hr /&gt;

&lt;h3 id=&quot;3-disable-smb-security-signing-powershell&quot;&gt;3. Disable SMB Security Signing (PowerShell)&lt;/h3&gt;

&lt;p&gt;Force Windows to allow insecure (but functional) SMB connections.&lt;/p&gt;

&lt;p&gt;Open &lt;strong&gt;PowerShell as Administrator&lt;/strong&gt; and run:&lt;/p&gt;

&lt;div class=&quot;language-powershell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;Set-SmbClientConfiguration&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;-RequireSecuritySignature&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;bp&quot;&gt;$false&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;-EnableSecuritySignature&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;bp&quot;&gt;$false&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;-Confirm&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;bp&quot;&gt;$false&lt;/span&gt;&lt;span class=&quot;w&quot;&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Verify the change:&lt;/p&gt;

&lt;div class=&quot;language-powershell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;Get-SmbClientConfiguration&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;o&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Select&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;RequireSecuritySignature&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;EnableSecuritySignature&lt;/span&gt;&lt;span class=&quot;w&quot;&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;blockquote&gt;
  &lt;p&gt;Both values should be &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;False&lt;/code&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;hr /&gt;

&lt;h3 id=&quot;4-allow-insecure-guest-access-registry&quot;&gt;4. Allow Insecure Guest Access (Registry)&lt;/h3&gt;

&lt;p&gt;This is often the &lt;strong&gt;missing piece&lt;/strong&gt; — Windows blocks guest logons by default.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Press &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Win + R&lt;/code&gt;, type &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;regedit&lt;/code&gt;, and press Enter&lt;/li&gt;
  &lt;li&gt;Navigate to:
    &lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\LanmanWorkstation\Parameters
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;Create or modify a DWORD (32-bit) value:
    &lt;ul&gt;
      &lt;li&gt;&lt;strong&gt;Name&lt;/strong&gt;: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;AllowInsecureGuestAccess&lt;/code&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Value&lt;/strong&gt;: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;1&lt;/code&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Click OK and &lt;strong&gt;restart your PC&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
  &lt;p&gt;⚠️ This setting is ignored if Group Policy overrides it (common in corporate networks).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;hr /&gt;

&lt;h3 id=&quot;5-try-accessing-the-share&quot;&gt;5. Try Accessing the Share&lt;/h3&gt;

&lt;p&gt;Now try accessing the shared folder:&lt;/p&gt;

&lt;p&gt;In &lt;strong&gt;File Explorer&lt;/strong&gt;:&lt;/p&gt;
&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;\\192.168.50.100\Server File
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Or via &lt;strong&gt;Command Prompt&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-cmd&quot;&gt;net use Z: \\192.168.50.100\Server File
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Replace &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Data&lt;/code&gt; with your actual shared folder name.&lt;/p&gt;

&lt;hr /&gt;

&lt;h3 id=&quot;6-update-network-driver&quot;&gt;6. Update Network Driver&lt;/h3&gt;

&lt;p&gt;Outdated or corrupted network drivers can block SMB.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Press &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Win + X&lt;/code&gt; → &lt;strong&gt;Device Manager&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Expand &lt;strong&gt;Network adapters&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Right-click your adapter → &lt;strong&gt;Update driver&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Choose: &lt;em&gt;“Search automatically for drivers”&lt;/em&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If no update found, try &lt;strong&gt;uninstalling&lt;/strong&gt; the driver and restarting — Windows will reinstall it.&lt;/p&gt;

&lt;hr /&gt;

&lt;h3 id=&quot;7-use-ethernet-instead-of-wi-fi&quot;&gt;7. Use Ethernet Instead of Wi-Fi&lt;/h3&gt;

&lt;p&gt;Wi-Fi power-saving or security settings can interfere with SMB.&lt;/p&gt;

&lt;p&gt;➡️ &lt;strong&gt;Connect via Ethernet cable&lt;/strong&gt; if possible and test again.&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;solution-2-automatic-fix-fix-smbbat&quot;&gt;Solution 2: Automatic Fix (fix-smb.bat)&lt;/h2&gt;

&lt;p&gt;If the manual steps are too time-consuming, use this &lt;strong&gt;automated batch script&lt;/strong&gt; to apply all fixes at once.&lt;/p&gt;

&lt;h3 id=&quot;fix-smbbat--one-click-smb-repair&quot;&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;fix-smb.bat&lt;/code&gt; – One-Click SMB Repair&lt;/h3&gt;

&lt;p&gt;Create a file named &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;fix-smb.bat&lt;/code&gt; with the following content:&lt;/p&gt;

&lt;div class=&quot;language-batch highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;@echo &lt;span class=&quot;na&quot;&gt;off&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt;.
&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt;  &lt;span class=&quot;kd&quot;&gt;Fixing&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;SMB&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;Configuration&lt;/span&gt;...
&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt;  &lt;span class=&quot;o&quot;&gt;=============================&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt;.

&lt;span class=&quot;c&quot;&gt;:: Allow insecure guest access&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;reg&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;add&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;HKLM\SYSTEM\CurrentControlSet\Services\LanmanWorkstation\Parameters&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;/v &lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;AllowInsecureGuestAccess&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;/t &lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;REG_DWORD&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;/d &lt;/span&gt;&lt;span class=&quot;m&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;/f

&lt;/span&gt;&lt;span class=&quot;c&quot;&gt;:: Disable SMB signing requirements&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;powershell&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;Set&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;-SmbClientConfiguration -RequireSecuritySignature &lt;/span&gt;$false &lt;span class=&quot;na&quot;&gt;-EnableSecuritySignature &lt;/span&gt;$false &lt;span class=&quot;na&quot;&gt;-Confirm&lt;/span&gt;:$false &lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;kr&quot;&gt;nul&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;amp;&lt;/span&gt;&lt;span class=&quot;m&quot;&gt;1&lt;/span&gt;

&lt;span class=&quot;c&quot;&gt;:: Reset network stack&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;netsh&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;winsock&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;reset&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;kr&quot;&gt;nul&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;netsh&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;int&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;ip&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;reset&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;kr&quot;&gt;nul&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;ipconfig&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;/flushdns &lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;kr&quot;&gt;nul&lt;/span&gt;

&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt;.
&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt;  &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;SUCCESS&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;Configuration&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;applied&lt;/span&gt;.
&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt;  &lt;span class=&quot;kd&quot;&gt;Please&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;restart&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;your&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;computer&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;to&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;complete&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;the&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;fix&lt;/span&gt;.
&lt;span class=&quot;nb&quot;&gt;echo&lt;/span&gt;.
&lt;span class=&quot;nb&quot;&gt;pause&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;how-to-use&quot;&gt;How to Use:&lt;/h3&gt;

&lt;ol&gt;
  &lt;li&gt;Save as &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;fix-smb.bat&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;Right-click → &lt;strong&gt;Run as administrator&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Restart your computer&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;Try accessing &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;\\192.168.50.100\Server File&lt;/code&gt; again&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
  &lt;p&gt;💡 This script combines all the manual fixes into one reliable tool.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;security-note&quot;&gt;Security Note&lt;/h2&gt;

&lt;p&gt;These fixes &lt;strong&gt;reduce security&lt;/strong&gt; for the sake of compatibility. Only use them in &lt;strong&gt;trusted networks&lt;/strong&gt; (home, office LAN). Avoid using them on public Wi-Fi or untrusted environments.&lt;/p&gt;

&lt;p&gt;To restore default security later:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;Set &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;AllowInsecureGuestAccess = 0&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;Re-enable SMB signing&lt;/li&gt;
  &lt;li&gt;Re-enable SMB 1.0 only if absolutely necessary&lt;/li&gt;
&lt;/ul&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;-summary&quot;&gt;📌 Summary&lt;/h2&gt;

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Step&lt;/th&gt;
      &lt;th&gt;Purpose&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Reset Winsock/IP&lt;/td&gt;
      &lt;td&gt;Clear network corruption&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Re-enable SMB 1.0&lt;/td&gt;
      &lt;td&gt;Support legacy servers&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Disable SMB signing&lt;/td&gt;
      &lt;td&gt;Allow connections to unsigned servers&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Allow insecure guest access&lt;/td&gt;
      &lt;td&gt;Enable passwordless access&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Update driver&lt;/td&gt;
      &lt;td&gt;Fix hardware-level issues&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Use Ethernet&lt;/td&gt;
      &lt;td&gt;Avoid Wi-Fi interference&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;troubleshot&quot;&gt;Troubleshot&lt;/h2&gt;

&lt;p&gt;If every PC can’t access your SMB server, try to disable Private Network on Firewall and Network Connection, you can also monitoring the current access with Powershell :&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;while ($true) {
    Clear-Host
    Write-Host &quot;=== SMB Sessions ===&quot; -ForegroundColor Yellow
    Get-SmbSession
    Write-Host &quot;`n=== Open Files ===&quot; -ForegroundColor Yellow
    Get-SmbOpenFile
    Start-Sleep -Seconds 5
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;final-thoughts&quot;&gt;Final Thoughts&lt;/h2&gt;

&lt;p&gt;If other computers can access the shared folder but yours can’t — &lt;strong&gt;it’s not the server’s fault&lt;/strong&gt;. The issue is almost always on the &lt;strong&gt;Windows client side&lt;/strong&gt; due to tightened security policies.&lt;/p&gt;

&lt;p&gt;With this guide and the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;fix-smb.bat&lt;/code&gt; script, you now have a &lt;strong&gt;complete toolkit&lt;/strong&gt; to fix SMB access issues — whether manually or automatically.&lt;/p&gt;

&lt;hr /&gt;

&lt;blockquote&gt;
  &lt;p&gt;&lt;strong&gt;Want this script handy?&lt;/strong&gt;&lt;br /&gt;
Save &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;fix-smb.bat&lt;/code&gt; on a USB drive for quick fixes on any Windows machine!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Have questions or a different error? Let me know in the comments! Thank you, yassarallahulakum.&lt;/p&gt;

&lt;p&gt;اَللّٰهُ أَعْلَم&lt;/p&gt;

&lt;p&gt;&lt;em&gt;al-faqiir ilaa rahmatillahi ta’ala&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;✎ Hasan B&lt;/p&gt;

&lt;p&gt;◉ Kiunara, KP Tengah, Cileungsi, Bogor, West Java, Indonesia&lt;/p&gt;

&lt;p&gt;📅 Thursday, 18 Rabiulakhir 1447 H&lt;/p&gt;
</description>
        <pubDate>Thu, 09 Oct 2025 16:00:13 +0000</pubDate>
        <link>https://creatorbe.github.io/windows/2025/10/09/how-to-fix-windows-cannot-access-network-shared-folder.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/windows/2025/10/09/how-to-fix-windows-cannot-access-network-shared-folder.html</guid>
        
        
        <category>windows</category>
        
      </item>
    
      <item>
        <title>Solved rd.break is stuck at Warning: Break before switch_root - RHA134</title>
        <description>&lt;p&gt;بِسْــــــــــــــــــمِ اللهِ الرَّحْمَنِ الرَّحِيْمِ&lt;/p&gt;

&lt;p&gt;اَلْحَمْدُ للّٰهِ رَبِّ العَالَمِيْنَ والعاقبة للمتقين&lt;/p&gt;

&lt;p&gt;وَالصَّلاَةُ وَالسَّلَامُ عَلىَ إمام الْمُرْسَلِيْنَ،نبيين مُحَمَّدٍ وَعَلَى اٰلِهِ وَصَحْبِهِ اَجْمَعِيْنَ&lt;/p&gt;

&lt;p&gt;اَمَّا بَعْدُ&lt;/p&gt;

&lt;h3 id=&quot;judul&quot;&gt;JUDUL&lt;/h3&gt;

&lt;p&gt;Mengatasi permasalahan rd.break di RHA 134 Chapter 10 - Controlling The Boot Process&lt;/p&gt;

&lt;h3 id=&quot;abstrak&quot;&gt;ABSTRAK&lt;/h3&gt;

&lt;p&gt;Pembahasan ini ditulis untuk membantu siapa saja (terlebih mahasiswa &lt;a href=&quot;https://sibermu.ac.id&quot; target=&quot;_blank&quot;&gt;Sibermu&lt;/a&gt;) yang mengalami permasalahan yang sama di course RHA134 Chapter 10, yang perlu di garis bawahi saya (penulis) tidak menggunakan fitur / tombol Show Solution (lihat solusi / jawaban) dari course yang dimaksud, bisa jadi apa yang saya tulis disini sama dengan solusi yang ada di balik fitur tersebut. Lalu kenapa saya menulis ini? karena saya merasa materi tutorial / course yang diberikan sebelumnya tidak menyertakan alternatif yang telah saya lakukan untuk menyelesaikan chapter ini, sementara ini saya belum tau pasti ini adalah bug atau memang penyedia course menginginkan peserta mencari dari referensi lain untuk menyelesaikan tugas lab di chapter 10 ini, atau memang bisa jadi hanya lab saya yang bermasalah, karena tidak seperti sebelumnya di RHA124 dan RHA134 chapter sebelumnya, tugas lab yang diberikan sesuai dengan materi yang disampaikan.&lt;/p&gt;

&lt;p&gt;Kemudian beberapa solusi dan referensi yang telah dikumpulkan disajikan disini dalam bentuk tahapan yang bisa diikuti / praktekkan dan diakhiri dengan kesimpulan. Versi Red Hat Enterprise Linux yang dipakai di lab ini ialah RHEL 9.0 plow, tidak menuntut kemungkinan jika terjadi permasalahan sebenarnya (real) yang sama diluar sana juga bisa mengikuti apa yang dijelaskan dipembahasan ini.&lt;/p&gt;

&lt;p&gt;Kata Kunci : Sibermu, Linux, Red Hat, RHA134 Chapter 10, Control The Boot Process, RHEL 9.0 Plow, Atur Ulang Kata Sandi RHEL, Diagnosa dan Perbaikan Boot, rd.break, init=/bin/bash&lt;/p&gt;

&lt;h3 id=&quot;isi&quot;&gt;ISI&lt;/h3&gt;

&lt;p&gt;Di Lab RHA134 Chapter 10, peserta diminta untuk mereset root password, memperbaiki beberapa konfigurasi boot dan menetapkan default target boot ke mode graphical.&lt;/p&gt;

&lt;p&gt;Setelah memulai lab dan masuk pada serverb melalui console di Lab Environment, akan mendapati issue pada file-system yang harus diselesaikan dan pertama-pertama harus merubah password user root terlebih dahulu. Hanya saja di materi sebelumnya menggunakan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;rd.break&lt;/code&gt; yang dipasang di akhir baris linux yang ada pada boot loader (dengan menekan huruf keyboard &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;e&lt;/code&gt; pada menu list boot untuk edit, menu ini ada setelah restart / awal booting), namun ketika menggunakan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;rd.break&lt;/code&gt; saya tidak bisa masuk ke prompt &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;switch_root&lt;/code&gt; yang diharapkan dari sana mengubah password user root ke redhat. Alih-alih masuk kesana, melainkan terlempar ke mode emergency yang passwordnya memang perlu direset dan jika diperhatikan list log diatasnya, sebelum masuk mode emergency, didapati error &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;rd.break is stuck at Warning: Break before switch_root&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Setelah beberapa waktu mencoba tetap gagal untuk masuk ke switch_root menggunakan rd.break, akhirnya diputuskan untuk masuk tanpa menggunakan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;rd.break&lt;/code&gt;, melainkan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;init=/bin/bash&lt;/code&gt; dengan tahapan sebagai berikut :&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;Edit boot-loader entry (pembahasannya telah disampaikan di materi sebelum tugas lab).&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Pembahasan yang disampaikan sebelumnya dengan menambahkan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;rd.break&lt;/code&gt; diakhir baris kata &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;linux&lt;/code&gt; dan itu sudah dicoba dan gagal / tidak bekerja, maka ganti dengan menambahkan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;init=/bin/bash&lt;/code&gt; diakhir baris kata, tidak hanya itu hapus juga &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;&apos;console=tty0&apos; &amp;amp; &apos;console=ttyS0,115200n8&apos;&lt;/code&gt;.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Kemudian &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Ctrl + x&lt;/code&gt; untuk booting dengan konfigurasi yang telah diperbaharui dilangkah nomor 2 diatas.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Maka akan masuk ke kernel commandline, dan secara default file sistem root dalam keadaan mount dan read-only maka remount untuk menjadikannya read-write, menggunakan perintah &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;mount -o remount,rw /&lt;/code&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Di shell yang sedang aktif sekarang ini bisa digunakan untuk reset password dan mengatasi permasalahan yang ada dalam tugas lab, untuk reset password, menggunakan perintah &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;passwd&lt;/code&gt; dan ganti passwordnya ke &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;redhat&lt;/code&gt; (sesuai soal dalam tugas lab ini).&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Setelah password berhasil diperbaharui, bisa keluar dari shell dengan perintah &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;exec /sbin/init&lt;/code&gt; atau &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;reboot&lt;/code&gt;. Dalam posisi ini password telah berhasil diatur ulang.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Demikian beberapa tahapan yang bisa dilakukan untuk berhasil reset password yang sebelumnya terkendala ketika menggunakan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;rd.break&lt;/code&gt;, disiasati dengan masuk melalui alternatif shell &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;init=/bin/bash&lt;/code&gt;. Selanjutnya silahkan kembali mengerjakan tugas lab nya sesuai materi yang sebelumnya disampaikan.&lt;/p&gt;

&lt;h3 id=&quot;penutup&quot;&gt;PENUTUP&lt;/h3&gt;

&lt;p&gt;Dari beberapa referensi yang dihimpun, maka disimpulkan Opsi kernel &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;rd.break&lt;/code&gt; dan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;init=/bin/bash&lt;/code&gt; memiliki tujuan sama dan berbeda dalam cara kerjanya:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;rd.break:&lt;/strong&gt; Opsi ini menghentikan proses booting dan memberikan akses ke emergency shell, sebelum sistem beralih ke sistem file root yang sebenarnya. Ketika menggunakan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;rd.break&lt;/code&gt;, sistem initial RAM disk (initramfs) awalnya terpasang / mount sebagai inisialisasi dari sistem file root, dalam posisi ini bisa menggunakan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;mount&lt;/code&gt; untuk mengakses sistem file root yang sebenarnya. Ini berguna untuk memperbaiki masalah booting yang terkait dengan initramfs, termasuk reset password.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;init=/bin/bash:&lt;/strong&gt; Opsi ini secara langsung menetapkan bahwa shell &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/bin/bash&lt;/code&gt; dieksekusi sebagai proses init dari sistem, sehingga membuatnya menjadi proses root. Ini menggantikan proses init standar karena menjalankan shell secara langsung. Dengan cara ini bisa langsung masuk menuju sistem file root yang sebenarnya tanpa melalui initramfs. Ini juga masuk dalam kategori mode emergency shell, untuk pemulihan ketika sistem tidak dapat booting normal.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Seperti yang telah dialami, &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;rd.break&lt;/code&gt; tidak berfungsi seperti yang diharapkan, kesimpulannya bisa jadi karena konfigurasi tertentu atau masalah dengan initramfs, Penggunaan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;init=/bin/bash&lt;/code&gt; yang mem bypass initramfs, sangat bermanfaat ketika &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;rd.break&lt;/code&gt; tidak berfungsi seperti kasus ini. Hanya saja penggunaan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;init=/bin/bash&lt;/code&gt; harus dilakukan dengan hati-hati karena proses ini tidak melalui langkah inisialisasi dan konfigurasi yang terjadi selama proses booting, tidak seperti dengan apa yang dilakukan &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;rd.break&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;اَللّٰهُ أَعْلَم&lt;/p&gt;

&lt;p&gt;Alhamdulillahi rabbil ‘alamin, mungkin sekian dulu catatan kecil ini, semoga bermanfaat, barakallahufiik.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Al-Faqiir ilaa Rahmatillahi Ta’ala&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;✎ Hasan Basri&lt;/p&gt;

&lt;p&gt;◉ Belakang pemda situbondo - Sabtu (malam Ahad), 21 Rabi’ul Awwal 1445&lt;/p&gt;
</description>
        <pubDate>Sat, 07 Oct 2023 15:35:05 +0000</pubDate>
        <link>https://creatorbe.github.io/kuliah/sibermu/linux/rha/2023/10/07/RH134-rd-break-is-stuck-before-switch_root.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/kuliah/sibermu/linux/rha/2023/10/07/RH134-rd-break-is-stuck-before-switch_root.html</guid>
        
        
        <category>kuliah</category>
        
        <category>sibermu</category>
        
        <category>linux</category>
        
        <category>rha</category>
        
      </item>
    
      <item>
        <title>Red Hat Academy (RHA) Sibermu - Bab 1</title>
        <description>&lt;p&gt;بِسْــــــــــــــــــمِ اللهِ الرَّحْمَنِ الرَّحِيْمِ&lt;/p&gt;

&lt;p&gt;اَلْحَمْدُ للّٰهِ رَبِّ العَالَمِيْنَ والعاقبة للمتقين&lt;/p&gt;

&lt;p&gt;وَالصَّلاَةُ وَالسَّلَامُ عَلىَ إمام الْمُرْسَلِيْنَ،نبيين مُحَمَّدٍ وَعَلَى اٰلِهِ وَصَحْبِهِ اَجْمَعِيْنَ&lt;/p&gt;

&lt;p&gt;اَمَّا بَعْدُ&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hai&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Sebelumnya salam kenal, saya Hasan Basri asal situbondo jawatimur, dari prodi informatika sibermu angkatan 5. Bagi kalian yang belum tau apa SiberMu yuk kunjungi &lt;a href=&quot;https://sibermu.ac.id/&quot; target=&quot;_blank&quot;&gt;Kampus Virtual SiberMu&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Teruntuk sesama angkatan salam kompak selalu dan bagi kakak angkatan dan segenap dosen, mohon bimbingannya (/|).
Berikut rangkuman dari materi Redhat Academy, sekedar catatan sederhana, semoga bermanfaat dan sengaja tidak saya tulis lengkap khawatir copyright, tapi insyaAllah sudah mencakup inti materi, saran dan kritik membangun saya terima dengan sangat senang hati &amp;lt;3 barakallahufiik.&lt;/p&gt;

&lt;blockquote&gt;

  &lt;p&gt;Sekedar mengingatkan kembali untuk mengikuti Red Hat Academy ini, silahkan mengikuti instruksi sesuai modul pdf panduan yang sudah di share di group whatsapp, kemudian setelah mendaftar dan mendapat rhnid dan email bisa lakukan konfirmasi di link google form dan selamat menunggu email konfirmasi. Setelah mendapat link konfirmasi di email silahkan masuk pakai rhnid dan password yang sebelumnya daftar di Red Hat untuk mempelajari materi. Untuk panduan lebih jelas bisa simak video mengenai &lt;a href=&quot;https://www.youtube.com/watch?v=FVqBI0LwyRU&quot; target=&quot;_blank&quot;&gt;RHCSA : Tutorial Membuat Red Hat Network Id dan Login Red Hat Academy&lt;/a&gt;. Pertanyaan lebih lanjut terkait Red Hat Academy bisa bergabung di link telegram yang telah di bagikan pak @andisugandi.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/74e7fdf0-fd9e-4120-bd18-2ad731fd8f51/dg7wfuq-f108a7b0-531d-4e91-ae00-f308d9b6db46.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzc0ZTdmZGYwLWZkOWUtNDEyMC1iZDE4LTJhZDczMWZkOGY1MVwvZGc3d2Z1cS1mMTA4YTdiMC01MzFkLTRlOTEtYWUwMC1mMzA4ZDliNmRiNDYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.dQ9PG_EdOqvF0Chp4vALuvgd3BpqNuD72Fi1kKBZWQ4&quot; alt=&quot;rhnid creatorbe sibermu&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;bab-1-memulai-red-hat-enterprise-linux&quot;&gt;&lt;em&gt;Bab 1. Memulai Red Hat Enterprise Linux&lt;/em&gt;&lt;/h1&gt;

&lt;ul class=&quot;task-list&quot;&gt;
  &lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; class=&quot;task-list-item-checkbox&quot; disabled=&quot;disabled&quot; checked=&quot;checked&quot; /&gt;Visi : Mengenal Open Source, Linux, Linux Distributions, Red Hat Enterprise Linux&lt;/li&gt;
  &lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; class=&quot;task-list-item-checkbox&quot; disabled=&quot;disabled&quot; checked=&quot;checked&quot; /&gt;Misi : Menjelaskan tujuan open source, Linux, Linux distributions, Red Hat enterprise Linux&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;linux&quot;&gt;Linux&lt;/h2&gt;

&lt;p&gt;Linux adalah kernel opensource, kernel adalah core / inti, antar muka pertama yang mengontrol sistem dengan mengakses CPU, Memory, disk I/O, networking melalui sistem operasi. Sistem operasi / operating system (OS) sendiri adalah perangkat lunak (software) yang bertugas menangani operasi dasar sistem dan manajemen perangkat keras (hardware), banyak sistem operasi yang sering kita pakai misal Windows, atau di laptop macbook memakai OS MacOS, di iphone memakai OS iOS, atau di smartphone lain memakai OS Android. Linux pertama kali dikembangkan oleh Linus Torvalds pada tahun 1991. Sebenarnya Linux dikembangkan untuk komputer pribadi berarsitektur Intel x86, tetapi seiring waktu Linux telah diporting ke berbagai arsitektur, bahkan lebih banyak daripada sistem operasi lainnya.&lt;/p&gt;

&lt;h3 id=&quot;kenapa-harus-belajar-linux&quot;&gt;Kenapa harus belajar Linux?&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;Teknologi penting yang harus diketahui pekerja IT/TI profesional.&lt;/li&gt;
  &lt;li&gt;Linux mengelola sistem point-of-sale (sistem yang digunakan untuk penjualan produk) dan pasar saham dunia.&lt;/li&gt;
  &lt;li&gt;Mendukung smart TV dan sistem entertainment dalam penerbangan (hiburan audio,video yang disajikan pada penumpang maskapai penerbangan).&lt;/li&gt;
  &lt;li&gt;Dipakai disebagian besar 500 superkomputer (komputer yg dipakai untuk perhitungan intensif semisal simulasi pesawat, riset iklim dan perkiraan cuaca, dll) di dunia.&lt;/li&gt;
  &lt;li&gt;Menyediakan teknologi yang mempelopori cloud revolution dan menyediakan tool untuk membangun generasi terkini dari aplikasi berbasis container, software-based dan big data.&lt;/li&gt;
  &lt;li&gt;Pengguna OS Windows butuh untuk saling bekerja dengan sistem Linux dan aplikasinya.&lt;/li&gt;
  &lt;li&gt;Cloud Computing (teknologi internet komputer) memakai Linux.&lt;/li&gt;
  &lt;li&gt;Aplikasi mobile dan perangkat Internet of Things (IoT) kebanyakan memakai Linux.&lt;/li&gt;
  &lt;li&gt;dll&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;apa-bagusnya-memakai-linux&quot;&gt;Apa bagusnya memakai Linux?&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;Karena Opensource, maksudnya kita bisa mengakses semuanya (source code, dll) kita bisa mengetahui cara kerja sistemnya, bisa memodifikasi dan membagikan secara gratis untuk dipakai bersama, termasuk tujuan opensource untuk lebih mudah dan cepat dalam pengembangan software itu sendiri.&lt;/li&gt;
  &lt;li&gt;Menyediakan command-line interface / CLI (bisa menggakses komputer dengan interface / antarmuka tampilan berbasis text saja) untuk kemudahan akses dan powerfull scripting (interpreter menerjemahkannya sehingga dipahami kernel, bisa dipakai untuk otomatisasi pekerjaan, backup, monitoring, dll)&lt;/li&gt;
  &lt;li&gt;Karena Modular, bisa dengan mudah memperbaharui, meningkatkan, mengganti, menghapus semua komponen dalam sistem operasi.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;opensource-software&quot;&gt;Opensource Software&lt;/h2&gt;

&lt;ul&gt;
  &lt;li&gt;Adalah Perangkat lunak (software) yang source code nya bisa dipelajari, dimodifikasi dan dibagikan.&lt;/li&gt;
  &lt;li&gt;Source code adalah kumpulan kode instruksi yang bisa dipahami manusia dan digunakan untuk membuat program.&lt;/li&gt;
  &lt;li&gt;Source code yang telah dibuat memiliki copyright (hak cipta).&lt;/li&gt;
  &lt;li&gt;Pembuat hak cipta memberikan ketentuan terkait perangkat lunak yang dibuat apakah bisa disalin, dimodifikasi, disebarkan, dll.&lt;/li&gt;
  &lt;li&gt;Pengguna perangkat lunak menggunakannya sesuai lisensi yang tertera.&lt;/li&gt;
  &lt;li&gt;Beberapa perangkat lunak ada yang memiliki lisensi kepemilikan / hak paten (proprietary / closed source) source code nya hanya bisa dilihat, diubah, atau didistribusikan oleh orang, tim, atau organisasi pembuatnya, sedangkan bagi pengguna lain ada keterbatasan dalam mengakses program dan source codenya.&lt;/li&gt;
  &lt;li&gt;Perangkat lunak opensource tetap bisa dijadikan komersial.&lt;/li&gt;
  &lt;li&gt;Vendor opensource seperti Red Hat menawarkan dukungan komersial untuk menerapkan, mengelola, dan memberikan solusi tepat berdasarkan produk opensource.&lt;/li&gt;
  &lt;li&gt;Lisensi Copyleft adalah lisensi opensource yang hasil turunan (perangkat lunak yang telah dimodifikasi / dikembangkan) harus sama lisensi nya dengan lisensi induk / awalnya.&lt;/li&gt;
  &lt;li&gt;Lisensi Permissive adalah lisensi opensource yang hasil turunannya boleh memakai lisensi lain bahkan dijadikan lisensi proprieatary, komersil.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;manfaat-opensource&quot;&gt;Manfaat Opensource&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;Control = Mengetahui bagaimana cara kerja kode dan meningkatkan performanya.&lt;/li&gt;
  &lt;li&gt;Training = Melatih untuk langsung belajar dari code yang sudah berjalan dan bisa membuat aplikasi lain yang bermanfaat.&lt;/li&gt;
  &lt;li&gt;Security = Memeriksa kode yang sensitif (ada celah untuk dirusak) dan bisa langsung memperbaikinya.&lt;/li&gt;
  &lt;li&gt;Stability = Kode nya tetap bisa diandalkan (dimanfaatkan, dikembangkan, dll) meskipun sudah ditinggalkan oleh pembuat awalnya.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;apa-itu-linux-distribution--distro-linux&quot;&gt;Apa itu Linux Distribution / Distro Linux&lt;/h2&gt;

&lt;ul&gt;
  &lt;li&gt;Distro Linux, sebutan untuk sistem operasi yang dikembangkan menggunakan kernel Linux.&lt;/li&gt;
  &lt;li&gt;Dibuat untuk tujuan tertentu dan kadang juga didalamnya memiliki banyak aplikasi opensource.&lt;/li&gt;
  &lt;li&gt;Distro Linux Memiliki dokumentasi terkait distro dan instalasi.&lt;/li&gt;
  &lt;li&gt;Distro Linux Menyediakan partisipasi untuk dukungan software dan komunitas pengembang.&lt;/li&gt;
  &lt;li&gt;Distro Linux tidak hanya dikembangkan gratis oleh komunitas, ada juga yang dikembangkan secara berbayar oleh organisasi.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;mengenal-red-hat&quot;&gt;Mengenal Red Hat&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;Adalah perusahaan penyedia perangkat lunak opensource terkemuka dunia.&lt;/li&gt;
  &lt;li&gt;Pelopor di komunitas dalam mengembangkan teknologi cloud, Linux, middleware, storage, teknologi virtualisasi dan teknologi terbaik lain nya dengan sistem opensource.&lt;/li&gt;
  &lt;li&gt;Berpartisipasi dalam mengembangkan pelanggan dalam komunitas opensource dan industri teknologi.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;fedora-rawhide---fedora--centos-stream---red-hat-enterprise-linux--rhel&quot;&gt;Fedora Rawhide - Fedora | CentOS Stream - Red Hat Enterprise Linux / RHEL&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;RHEL, Distro Linux komersil yang di distribusikan oleh perusahaan Red Hat.&lt;/li&gt;
  &lt;li&gt;Red Hat mendukung penuh dalam pengembangannya demi mendapatkan software berkualitas untuk semua orang.&lt;/li&gt;
  &lt;li&gt;Red Hat mensponsori fedora (salah satu distro Linux) dan mengintegrasikan menjadi proyek opensource yang berbasis komunitas dan fedora menjadi laboratorium pengembangan untuk fitur yang nantinya akan masuk pada CentOS dan produk RHEL.&lt;/li&gt;
  &lt;li&gt;CentOS adalah upstream dari RHEL, dimana source nya dari Fedora.&lt;/li&gt;
  &lt;li&gt;Red Hat berupaya menjaga CentOS Stream tetap stabil untuk siap digunakan dalam jangka waktu panjang, terstandart dan mengintegrasikan pada RHEL dalam keadaan siap produksi.&lt;/li&gt;
  &lt;li&gt;Pembaharuan RHEL bersifat opensource dan semua orang bisa berkontribusi didalamnya, patch akan di kirim ke CentOS Stream dan akan segera di integrasikan ke RHEL.&lt;/li&gt;
  &lt;li&gt;RHEL Edge, varian RHEL yang digunakan untuk membuat image OS untuk keperluan Edge Computing (lokalisasi cloud computing biasanya untuk keperluan perangkat IoT)&lt;/li&gt;
  &lt;li&gt;Red Hat CoreOS (RHCOS), bukan OS yang berdiri sendiri tapi image OS pada host dalam container, termasuk bagian dari Red Hat OpenShift Container Platform (RHOCP), terkait detail mengenai ini bisa mempelajari OpenShift dan containers.&lt;/li&gt;
  &lt;li&gt;Red Hat Universal Base Image (UBI), ini biasanya diperuntukkan bagi developer / pengembang yang ingin mengembangkan aplikasi cloud-native dalam container, seperti bahasa pemprograman .NET, Golang, Node.js, Perl, PHP, Python, dan Ruby.&lt;/li&gt;
  &lt;li&gt;Fedora Rawhide adalah continuous development environment (sebuah lingkungan pengembangan berkala) dari Fedora yang dirilis ke publik atau sederhananya Fedora Rawhide adalah versi terbaru fedora yang sedang dikembangkan.&lt;/li&gt;
  &lt;li&gt;Komunitas melakukan pengujian dan menyiapkan versi kernel Linux baru, driver, utilities, dan aplikasi untuk di distribusikan sebagai rilis Fedora versi selanjutnya, adapun RHEL yang dirilis didapatkan dari rilis Fedora terbaru yang menjadi dasar dari CentOS Stream. Contohnya : Fedora 34 adalah sumber kode awal yang digunakan untuk membangun RHEL 9 dan CentOS Stream 9, jika ada package suatu software/aplikasi fedora 34 diperbaharui, maka pembaharuan dimasukkan ke CentOS Stream dan akan menjadi RHEL versi nightly build.&lt;/li&gt;
  &lt;li&gt;Permisalan antara Fedora dan Fedora Rawhide sama dengan RHEL dan CentOS Stream, CentOS Stream disiapkan untuk pengembangan minor rilis dari RHEL dan Red Hat melakukan pengujian disegala aspek sebelum merilis RHEL ke publik.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;beberapa-alternatif-untuk-mendapatkan-rhel&quot;&gt;Beberapa alternatif untuk mendapatkan RHEL&lt;/h2&gt;

&lt;ul&gt;
  &lt;li&gt;RHEL varian evaluation bisa download di &lt;a href=&quot;https://access.redhat.com/products/red-hat-enterprise-linux/evaluation&quot; target=&quot;_blank&quot;&gt;https://access.redhat.com/products/red-hat-enterprise-linux/evaluation&lt;/a&gt; untuk mengakses nya bisa gratis mendaftar akun di &lt;a href=&quot;https://access.redhat.com/&quot; target=&quot;_blank&quot;&gt;https://access.redhat.com/&lt;/a&gt;. Produk ini akan menerima update dan dukungan dari Red Hat dalam periode tertentu, dan jika periode habis tetap masih bisa dipakai hanya saja tanpa dukugan Red Hat lagi.&lt;/li&gt;
  &lt;li&gt;RHEL Developer Subsription, varian RHEL yang bisa download di &lt;a href=&quot;https://developer.redhat.com/&quot; target=&quot;_blank&quot;&gt;https://developer.redhat.com/&lt;/a&gt;, catatan : Ada himbauan dari Red Hat untuk tidak menggunakan varian subscription ini jika sudah memiliki subscription organisasi tertentu, karena Developer Subcription ditujukan untuk perseorangan yang tertarik untuk mencobanya.&lt;/li&gt;
  &lt;li&gt;Penyedia komputasi awan (Cloud Providers) terkemuka seperti Amazon Web Services, Google Cloud Platform, Microsoft Azure, pun menawarkan RHEL dengan subscription Red Hat Cloud Access service.&lt;/li&gt;
  &lt;li&gt;Fedora Linux dan beberapa turunannya bisa dipakai gratis, bisa download di &lt;a href=&quot;https://getfedora.org&quot; target=&quot;_blank&quot;&gt;https://getfedora.org&lt;/a&gt;.&lt;/li&gt;
  &lt;li&gt;EPEL / EPEL Next = Extra Packages for Enterprise Linux (EPEL) menyediakan berbagai package turunan dari Fedora atau sudah masuk CentOS tapi belum tersedia di RHEL. Silahkan baca lebih detail di &lt;a href=&quot;https://docs.fedoraproject.org/en-US/epel/&quot; target=&quot;_blank&quot;&gt;https://docs.fedoraproject.org/en-US/epel/&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;CentOS Stream bisa download di &lt;a href=&quot;https://www.centos.org/centos-stream/&quot; target=&quot;_blank&quot;&gt;https://www.centos.org/centos-stream/&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;rangkuman&quot;&gt;Rangkuman&lt;/h2&gt;

&lt;ul&gt;
  &lt;li&gt;Perangkat lunak (software) Open source adalah perangkat lunak yang source code nya bisa diakses semua orang, dipelajari, dimodifikasi dan dibagikan ulang.&lt;/li&gt;
  &lt;li&gt;Linux Distribution / Distro, ialah sistem operasi yang dibangun menggunakan Linux Kernel dengan dukungan aplikasi dan library.&lt;/li&gt;
  &lt;li&gt;Perusahaan Red Hat berpartisipasi dan berkontribusi pada proyek Open source, mensponsori dan mengintegrasikannya menjadi distribusi berbasis komunitas kemudian menstabilkannya agar dapat ditawarkan sebagai produk komersil yang enterprise-ready (suatu sistem teruji yang digunakan untuk meningkatkan aktivitas operasional perusahaan bekerja secara efektif).&lt;/li&gt;
  &lt;li&gt;Red Hat Enterprise Linux (RHEL) adalah produk opensource yang enterprise-ready dengan dukungan berbayar yang ditawarkan oleh perusahaan Red Hat,&lt;/li&gt;
  &lt;li&gt;Red Hat Developer Subscription versi gratis dibuat untuk mempermudah seseorang untuk mendapat sumber belajar, informasi, termasuk Developer Subscription sendiri dan produk produk Red Hat lainnya.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;tips&quot;&gt;Tips&lt;/h2&gt;

&lt;ul&gt;
  &lt;li&gt;Keseluruhan course berbahasa inggris, dan beberapa bahasa lain selain bahasa indonesia, untuk pengguna browser chrome terbaru bisa klik kanan dan pilih terjemahkan halaman ini, atau bisa juga install addons / aplikasi chrome untuk menerjemahkan halaman atau kata yg dipilih (select/blok) menggunakan &lt;a href=&quot;https://chrome.google.com/webstore/detail/imtranslator-translator-d/noaijdpnepcgjemiklgfkcfbkokogabh&quot; target=&quot;_blank&quot;&gt;ImTranslator&lt;/a&gt;. Saya rekomendasikan ImTranslator karena memakai beberapa provider translator, Google, Bing, Yandex dan untuk hasil translate lebih manusiawi lagi (human readable) bisa memakai chatGPT atau addons yang memakai chatGPT seperti &lt;a href=&quot;https://chrome.google.com/webstore/detail/maxaime-use-chatgpt-ai-an/mhnlakgilnojmhinhkckjpncpbhabphi&quot;&gt;MaxAI.me&lt;/a&gt;.&lt;/li&gt;
  &lt;li&gt;Teruntuk prodi informatika / informasi, bahasa inggris termasuk ilmu alat penting yang dibutuhkan oleh pekerja IT dan mempelajarinya termasuk nilai tersendiri, karena mayoritas dokumentasi teknologi terupdate menggunakan bahasa inggris. Sebagaimana jika alat sudah lengkap maka pekerjaan lebih efisien lagi untuk dikerjakan. (Tentunya tetap semua kemudahan datangnya dari Allah, adapun keahlian hanya salah satu usaha untuk menggapai kemudahan dari Allah).&lt;/li&gt;
  &lt;li&gt;Kembali mengingatkan kutipan dari pak @andisugandi &lt;strong&gt;Goal untuk September 2023 ini bukan kebut-kebutan 15 chapters selesai (+ dapat sertifikat ketuntasan), melainkan mendapatkan exam voucher. Syaratnya dapat exam voucher ini harus eligible, syarat eligible: jangan ngebut: maksimal 2/3 chapter per 1X login (per hari). Boleh diulang-ulang untuk setiap chapter yg sama (berkali-kali login per hari).&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;اَللّٰهُ أَعْلَم&lt;/p&gt;

&lt;p&gt;Alhamdulillahi rabbil ‘alamin, mungkin sekian dulu catatan kecil ini, insyaAllah kita akan bertemu lagi di sesi berikutnya, barakallahufiik.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Al-Faqiir ilaa Rahmatillahi Ta’ala&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;✎ Hasan Basri&lt;/p&gt;

&lt;p&gt;◉ Belakang pemda situbondo - Selasa, 19 Shofar 1445&lt;/p&gt;
</description>
        <pubDate>Mon, 04 Sep 2023 17:45:05 +0000</pubDate>
        <link>https://creatorbe.github.io/kuliah/sibermu/linux/rha/2023/09/04/rha-sibermu-bab-1.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/kuliah/sibermu/linux/rha/2023/09/04/rha-sibermu-bab-1.html</guid>
        
        
        <category>kuliah</category>
        
        <category>sibermu</category>
        
        <category>linux</category>
        
        <category>rha</category>
        
      </item>
    
      <item>
        <title>Apa itu sunnah Rosul?</title>
        <description>&lt;div class=&quot;language-sh highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;بِسْــــــــــــــــــمِ اللهِ الرَّحْمَنِ الرَّحِيْمِ
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;div class=&quot;language-sh highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;إِنَّ الْحَمْدَ لِلَّهِ, نَحْمَدُهُ, وَنَسْتَعِينُهُ, وَنَسْتَغْفِرُهُ, وَنَعُوذُ بِاللَّهِ مِنْ شُرُورِ أَنْفُسِنَا, وَسَيِّئَاتِ أَعْمَالِنَا

مَنْ يَهْدِهِ اللَّهُ فَلاَ مُضِلَّ لَهُ, وَمَنْ يُضْلِلْ فَلاَ هَادِيَ لَهُ, وَأَشْهَدُ أَنْ لاَ إِلَهَ إِلاَّ اللَّهُ وَحْدَهُ لاَ شَرِيْكَ لَهُ, وَأَشْهَدُ أَنَّ مُحَمَّدًا عَبْدُهُ وَرَسُولُهُ

يَا أَيُّهَا الَّذِينَ آمَنُوا اتَّقُوا اللَّهَ حَقَّ تُقَاتِهِ وَلاَ تَمُوتُنَّ إِلاَّ وَأَنْتُمْ مُسْلِمُونَ

يَا أَيُّهَا النَّاسُ اتَّقُوا رَبَّكُمُ الَّذِي خَلَقَكُمْ مِنْ نَفْسٍ وَاحِدَةٍ وَخَلَقَ مِنْهَا زَوْجَهَا وَبَثَّ مِنْهُمَا رِجَالاً كَثِيرًا وَنِسَاءً وَاتَّقُوا اللَّهَ الَّذِي تَسَاءَلُونَ بِهِ وَالأََرْحَامَ إِنَّ اللَّهَ كَانَ عَلَيْكُمْ رَقِيبًا

يَا أَيُّهَا الَّذِينَ آمَنُوا اتَّقُوا اللَّهَ وَقُولُوا قَوْلاً سَدِيدًا يُصْلِحْ لَكُمْ أَعْمَالَكُمْ وَيَغْفِرْ لَكُمْ ذُنُوبَكُمْ وَمَنْ يُطِعِ اللَّهَ وَرَسُولَهُ فَقَدْ فَازَ فَوْزًا عَظِيمًا

أَمَّا بَعْدُ:
فَإِنَّ خَيْرَ الْحَدِيثِ كِتَابُ اللَّهِ, وَخَيْرَ الْهَدْيِ هَدْيُ مُحَمَّدٍ, وَشَرَّ الأُمُورِ مُحْدَثَاتُهَا, وَكُلَّ مُحْدَثَةٍ بِدْعَةٌ, وَكُلَّ بِدْعَةٍ ضَلاَلَةٌ, وَكُلُّ ضَلاَلَةٍ فِي النَّارِ
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;blockquote&gt;
  &lt;p&gt;Ketahuilah wahai sauadaraku -semoga Allah memberkahimu- aku membuka risalah (wacana tertulis) ini dengan kalimat bismillahirrohmanirrohim karena yang demikian termasuk &lt;strong&gt;sunnah rosul&lt;/strong&gt;, hal ini diriwayatkan dalam &lt;a href=&quot;https://www.hadits.id/hadits/bukhari/6&quot;&gt;hadits Bukhori&lt;/a&gt; bahwasanya nabi Muhammad shallallahu ‘alaihi wasallam memulai suratnya pada raja heraclius dengan basmalah.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Wahai saudaraku &lt;em&gt;-semoga Allah memberi kita hidayah-&lt;/em&gt; perhatikanlah kalimatku diatas, engkau mendapatiku mengatakan &lt;strong&gt;sunnah rosul&lt;/strong&gt; kemudian mengutip salah satu hadits riwayat bukhori (&lt;em&gt;hadits adalah salah satu redaksi yang bersumber dari Rasulullah Muhammad shallallahu ‘alaihi wasallam&lt;/em&gt;), Mengapa? karena ini adalah perintah Allah,&lt;/p&gt;

&lt;p&gt;فَاعْلَمْ أَنَّهُ لَا إِلَهَ إِلَّا اللَّهُ وَاسْتَغْفِرْ لِذَنْبِكَ&lt;/p&gt;

&lt;p&gt;&lt;em&gt;“Maka ilmuilah (ketahuilah)! Bahwasanya tiada sesembahan yang berhak disembah selain Allah dan mohonlah ampunan untuk dosamu”&lt;/em&gt;
&lt;strong&gt;Quran Surah, Muhammad [47]: 19&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Na’am dalam ayat tersebut, Allah memulainya dengan perintah &lt;strong&gt;‘ilmuilah’&lt;/strong&gt; lalu mengatakan &lt;strong&gt;‘mohonlah ampun’&lt;/strong&gt;. &lt;em&gt;Ilmuilah yang dimaksudkan adalah perintah untuk berilmu terlebih dahulu, sedangkan ‘mohonlah ampun’ adalah amalan. Ini pertanda bahwa ilmu hendaklah lebih dahulu sebelum amal perbuatan&lt;/em&gt;. Masyaallah, pernahkah terbersit olehmu penjelasan begitu gamblang ini? Barokallahufiikum, Engkau bisa menemuinya di kitab &lt;strong&gt;Fathul Bari, 1/108&lt;/strong&gt; dengan demikian Al Bukhori berkata, &lt;strong&gt;“Al ‘Ilmu Qoblal Qouli Wal ‘Amal“&lt;/strong&gt; (Ilmui dulu Sebelum Berkata dan Berbuat). &lt;em&gt;Sungguh agama ini indah, jelas dan terang wahai saudaraku hanya saja terkadang kita menutup diri dan terlalaikan dari menuntut ilmu (maka dari itu bersabarlah dalam membaca risalah ini hingga tuntas), semoga Allah memberi kita taufiq&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;(Berikutnya terjemahan teks dibawah Bismillahirrohmanirrohim diatas)&lt;/em&gt;&lt;/p&gt;
&lt;blockquote&gt;
  &lt;p&gt;Segala puji hanya bagi Allah, kami memuji-Nya, memohon pertolongan dan ampunan kepada-Nya, kami berlindung kepada Allah dari kejahatan diri-diri kami dan kejelekan amal perbuatan kami. Barangsiapa yang Allah beri petunjuk, maka tidak ada yang dapat menyesatkannya, dan barangsiapa yang Allah sesatkan, maka tidak ada yang dapat memberinya petunjuk. Aku bersaksi bahwasanya tidak ada sesembahan yang berhak diibadahi dengan benar kecuali Allah saja, tidak ada sekutu bagi-Nya, dan aku bersaksi bahwasanya Nabi Muhammad adalah hamba dan Rosul-Nya.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
  &lt;p&gt;Wahai orang-orang yang beriman, bertaqwalah kepada Allah dengan sebenar-benar taqwa kepada-Nya, dan janganlah sekali-kali kamu mati melainkan dalam keadaan beragama Islam. &lt;strong&gt;(QS.AIi’lmron: 102)&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
  &lt;p&gt;Wahai sekalian manusia, bertaqwalah kepada Robb-mu yang telah menciptakanmu dari diri yang satu, dan daripadanya Allah menciptakan pasangannya (istri), dan dari keduanya Allah memperkembangbiakkan laki-laki dan perempuan yang banyak. Dan bertaqwalah kepada Allah yang dengan menggunakan Nama-Nya kamu saling meminta, dan (peliharalah) hubungan silaturohim. Sesungguhnya Allah selalu menjaga dan mengawasimu. &lt;strong&gt;(QS. an-Nisa’:1)&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
  &lt;p&gt;Wahai orang-orang yang beriman, bertaqwalah kamu kepada Allah dan ucapkanlah perkataan yang benar, niscaya Allah memperbaiki bagimu amalan-amalanmu dan mengampuni bagimu dosa-dosamu. Dan barangsiapa mentaati Allah dan Rosul-Nya, maka sesungguhnya ia telah mendapatkemenanganyang besar.” &lt;strong&gt;(QS. al-Ahzaab: 70-71 )&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
  &lt;p&gt;Amma ba’du: Sesungguhnya sebenar-benar perkataan adalah Kitabulloh (al-Qur’an) dan sebaik-baik petunjuk adalah petunjuk Muhammad shallallahu ‘alaihi wa sallam (as-Sunnah). Seburuk-buruk perkara adalah perkara yang diada-adakan (dalam agama), setiap yang diada-adakan (dalam agama) adalah bid’ah, setiap bid’ah adalah sesat, dan setiap kesesatan tempat-nya di neraka.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Adapun setelahnya aku melanjutkan tulisanku dengan &lt;strong&gt;Khutbatul Hajah&lt;/strong&gt; (terjemahannya telah di uraikan diatas) yang demikian juga ada pada &lt;strong&gt;sunnah nabi&lt;/strong&gt;. Ada banyak riwayat menjelaskan seringnya rosulullah membaca khutbatul hajah sebelum memulai khutbahnya, salah satunya engkau bisa merujuk dalam riwayat &lt;em&gt;Hadits Muslim&lt;/em&gt;, bahwasanya Dhimad al-Azdi (tukang ruqyah zaman Jahiliyah yang datang untuk meruqyah rosulullah karena dia menganggap beliau gila, Subhanallah) akan tetapi dia malah mengucapkan syahadat masuk Islam setelah mendengar Nabi shallallahu ‘alaihi wa sallam membacakan khutbah hajah kepadanya, Dhimad berkata: &lt;em&gt;“Aku telah mendengar ucapan para dukun, para penyihir dan para penyair. Namun aku belum pernah mendengar kata-kata engkau (Rosulullah) tersebut. Sungguh, kata-kata itu telah sampai ke dasar lautan (karena kedalaman makna yang dikandungnya).”&lt;/em&gt; (&lt;strong&gt;Muslim: 868&lt;/strong&gt;). Adapun &lt;em&gt;syarah (penjelasan rinci)&lt;/em&gt; dari makna khutbatul hajah tidak terlampirkan dalam risalah ini karena pembahasan ini sudah mulai meluas, &lt;em&gt;-barokallahufiikum-&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Al muhim&lt;/em&gt; (intinya), Nabi kita shallallahu ‘alaihi wa sallam memulai suratnya pada Raja Heraklius dengan basmalah dan ketika berkhutbah Nabi shallallahu ‘alaihi wa sallam memulainya dengan hamdu lillah dan memuji Allah Ta’ala, yang demikian termasuk sunnah nabi / sunnah rasul (rosul) dan &lt;em&gt;-walhamdulillah-&lt;/em&gt; kita telah melewati pemaparan diatas sebagai contoh gamblang dan pendekatan secara konteks, sebelum kita masuk dalam pembahasan. Lalu apa arti Sunnah nabi / Sunnah rosul?&lt;/p&gt;

&lt;h1 id=&quot;pengertian-sunnah-nabi--sunnah-rosul&quot;&gt;Pengertian Sunnah Nabi / Sunnah Rosul&lt;/h1&gt;

&lt;h5 id=&quot;arti-sunnah-secara-umum&quot;&gt;Arti Sunnah Secara Umum&lt;/h5&gt;
&lt;p&gt;Telah dikenal secara umum dikalangan kita, sunnah adalah segala perbuatan yang apabila dikerjakan mendapat pahala dan jika ditinggalkan maka tidak berdosa. Na’am shahih, ini adalah &lt;strong&gt;pengertian secara sudut pandang para fuqaha (ulama pakar dalam disiplin ilmu fikih)&lt;/strong&gt;, &lt;a href=&quot;https://id.wikipedia.org/wiki/Fuqaha&quot;&gt;https://id.wikipedia.org/wiki/Fuqaha&lt;/a&gt; yang telah menyebar dikalangan kita. Maka datang juga tingkat hukum syariat yaitu: &lt;strong&gt;wajib, haram, makruh, mubah, dan&lt;/strong&gt; sunnah &lt;strong&gt;(mustahab/mandub)&lt;/strong&gt;. Dengan demikian sunnah dalam pandangan ini adalah suatu amal yang dianjurkan oleh syariat namun tidak mencapai derajat wajib atau harus, ini pengertian sunnah dalam pandangan Fiqih. Ulama Mutaakhkhirîn (belakangan ini) mengenai sunnah ini lebih dikenal dengan arti mustahab atau mandûb, sebaiknya dalam menghukumi syariat memang demikian jika hendak meninjau hukum, kita katakan hukum perkara ini adalah mustahab lalu sampaikan sisi pendalilan (al-quran/hadits) karena jika hanya dikatakan sunnah maka cangkupannya akan meluas meski tetap dalam satu konteks makna (penjelasannya akan datang dibawah ini, Insyaallah).&lt;/p&gt;

&lt;h5 id=&quot;arti-sunnah-secara-bahasa&quot;&gt;Arti Sunnah Secara Bahasa&lt;/h5&gt;
&lt;p&gt;Secara etimologi atau bahasa, sunnah berarti &lt;em&gt;‘thariqah’&lt;/em&gt; (jalan) atau metode. Silahkan merujuk pada &lt;strong&gt;Hadits Riwayat. Muslim: 2398&lt;/strong&gt;, bahwasanya:&lt;/p&gt;

&lt;p&gt;مَنْ سَنَّ فِى الإِسْلاَمِ سُنَّةً حَسَنَةً فَلَهُ أَجْرُهَا وَأَجْرُ مَنْ عَمِلَ بِهَا بَعْدَهُ مِنْ غَيْرِ أَنْ يَنْقُصَ مِنْ أُجُورِهِمْ شَىْءٌ وَمَنْ سَنَّ فِى الإِسْلاَمِ سُنَّةً سَيِّئَةً كَانَ عَلَيْهِ وِزْرُهَا وَوِزْرُ مَنْ عَمِلَ بِهَا مِنْ بَعْدِهِ مِنْ غَيْرِ أَنْ يَنْقُصَ مِنْ أَوْزَارِهِمْ شَىْءٌ&lt;/p&gt;

&lt;p&gt;“Barang siapa yang mencontohkan jalan yang baik di dalam Islam, maka ia akan mendapat pahala dan pahala orang yang mengamalkannya setelahnya tanpa mengurangi pahala mereka sedikit pun. Dan barang siapa yang mencontohkan jalan yang jelek, maka ia akan mendapat dosa dan dosa orang yang mengerjakannya sesudahnya tanpa mengurangi dosa mereka sedikit pun.”&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Wahai saudaraku -semoga Allah memudahkan urusan-urusanmu dalam kebaikan- jika kita bekerja di suatu perusahaan dan perusahaan mengumumkan ada bonus, hadiah sekian dan sekian jika mengerjakan suatu pekerjaan yang bisa kita lakukan, tidak kah kita mengambil peluang itu? Tentu, apa lagi kita di dunia ini Nahnu al-fuqara ilaallah, maka telah datang di depan kita Ghanimah, hendaknya kita bersemangat dalam menghidupkan sunnah (mengilmui, mengamalkan dan menyampaikan), tentunya yang berlandaskan dalil (sumber redaksi) yang shahih (valid).&lt;/em&gt;&lt;/p&gt;

&lt;h5 id=&quot;arti-sunnah-yang-penting-kita-ketahui&quot;&gt;Arti Sunnah yang PENTING kita ketahui&lt;/h5&gt;
&lt;p&gt;Berkata As-Syaikh &lt;strong&gt;Abdullah Hamud al Furaih&lt;/strong&gt; dalam Muqoddimah (pendahuluan) kitabnya &lt;strong&gt;Al-Minhul ‘Aliyyah fii Bayan As-Sunanil Yaumiyyah&lt;/strong&gt; &lt;em&gt;(telah terbit terjemahan indonesianya, &lt;strong&gt;Hadiah Indah Penjelasan Tentang Sunnah-Sunnah Sehari-Hari (shallallahu alaihi wa sallam)&lt;/strong&gt;)&lt;/em&gt;, beliau berkata: &lt;strong&gt;“Sunnah adalah segala sesuatu yang disandarkan kepada Rasul, baik berupa perkataan, perbuatan, penetapan, sifat fisik atau sifat perangainya”&lt;/strong&gt;. Sedangkan Pengertian tersebut terbagi lagi menjadi beberapa, salah satunya sudut pandang &lt;strong&gt;para pakar hadits (muhadditsun)&lt;/strong&gt; yang menyatakan segala redaksi yang bersumber pada nabi baik sebelum diutus menjadi nabi ataupun setelahnya, tentu apa yang diyakini &lt;strong&gt;Muhadditsun&lt;/strong&gt; itu sunnah bisa menjadi wajib bagi pengertian &lt;strong&gt;Fuqaha&lt;/strong&gt; (diatas sudah dibahas dalam tinjauan hukum syariat). Beda lagi dalam pembahasan &lt;strong&gt;Ushul Fiqih&lt;/strong&gt; (tidak dijelaskan secara rinci disini) segala sesuatu yang bersandarkan pada rosulullah namun yang hanya sudah ditetapkan beliau baik dalam perbuatan dan perkataan, Adapun yang berupa sifat fisik maupun akhlak, maka itu tidak termasuk sunnah dalam pandangan ushul fiqih. Begitu pula yang terjadi sebelum diutusnya beliau menjadi Nabi, atau yang berasal dari para Nabi sebelumnya, maupun generasi setelahnya, yaitu sahabat, tabiin, dan selainnya, maka hal itu pun bukan termasuk sunnah dalam pandangan disiplin ilmu ushul fiqih. Kemudian yang terakhir adalah sunnah menurut &lt;strong&gt;Ulama Aqidah&lt;/strong&gt;, Sunnah bagi mereka adalah setiap amal perbuatan yang ada contoh dan tuntunannya dari Rasulullah shallallahu ‘alaihi wasallam, bukan perkara yang diada-adakan dalam agama, pengertian ini melalui redaksi hadits yang diriwayatkan dari &lt;strong&gt;Abu Dawud, no. 4607, dan Tirmidzi, no. 2677&lt;/strong&gt;, bahwasanya:&lt;/p&gt;

&lt;p&gt;Rasulullah shallallahu ‘alaihi wasallam bersabda,&lt;/p&gt;

&lt;p&gt;فَعَلَيْكُمْ بِسُنَّتِى وَسُنَّةِ الْخُلَفَاءِ الْمَهْدِيِّينَ الرَّاشِدِينَ تَمَسَّكُوا بِهَا وَعَضُّوا عَلَيْهَا بِالنَّوَاجِذِ وَإِيَّاكُمْ وَمُحْدَثَاتِ الأُمُورِ فَإِنَّ كُلَّ مُحْدَثَةٍ بِدْعَةٌ وَكُلَّ بِدْعَةٍ ضَلاَلَة&lt;/p&gt;

&lt;p&gt;&lt;em&gt;“Maka dari itu, wajib atas kalian berpegang teguh dengan &lt;strong&gt;sunnahku dan sunnah khulafa rasyidin&lt;/strong&gt;. Gigitlah ia dengan gigi-gigi geraham kalian! Dan berhati-hatilah terhadap &lt;strong&gt;perkara baru yang diada-adakan dalam agama&lt;/strong&gt;. Karena setiap perkara yang baru dalam agama itu adalah bid’ah dan &lt;strong&gt;setiap bid’ah itu sesat&lt;/strong&gt;.”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Wahai saudaraku -semoga Allah merahmatimu-&lt;/em&gt; ketahuilah sunnah menurut pandangan &lt;strong&gt;Aqidah&lt;/strong&gt;, pembahasannya sering kali meruncing diantara kalangan kita, &lt;em&gt;-Nas-alullaha asSalamah wal afiah (kita memohon kepada Allah keselamatan dan kebaikan)-&lt;/em&gt;. Sebagian mengatakan &lt;em&gt;ini adalah perkara bid’ah dan itu adalah perkara bid’ah&lt;/em&gt;, perlu diluruskan bahwasanya bi’dah (https://id.wikipedia.org/wiki/Bidah) yang dimaksud khusus bid’ah dalam perkara agama, adalah segala perbuatan / amalan yang baru (sama sekali tidak dikerjakan Rosulullah) dalam &lt;strong&gt;perkara agama&lt;/strong&gt; dan semua nya telah gamblang di jelaskan pada teks hadits diatas dan disana engkau juga melihat bahwasanya pesan pertama Rosulullah ialah &lt;strong&gt;Berpegang teguhlah dengan sunnahku dan sunnah khulafa rasyidin (Abu bakar, Umar bin Khattab, Utsman bin Affan, Ali bin Abi Thalib)&lt;/strong&gt;, dan &lt;strong&gt;Dan berhati-hatilah terhadap perkara baru yang diada-adakan dalam agama&lt;/strong&gt; &lt;em&gt;-semoga Allah memberi kita hidayah dan taufiq-&lt;/em&gt;. Kemudian untuk memperjelas makna bid’ah dalam agama, kita merujuk tafsir &lt;a href=&quot;https://tafsirweb.com/10723-quran-surat-al-hadid-ayat-27.html&quot;&gt;&lt;strong&gt;QS.Al-Hadid:27&lt;/strong&gt;&lt;/a&gt; maka disana engkau akan menemui potongan terjemahan dari firman Allah Ta’ala :&lt;/p&gt;

&lt;p&gt;وَرَهْبَانِيَّةً ابْتَدَعُوهَا&lt;/p&gt;

&lt;p&gt;&lt;em&gt;‘Dan mereka &lt;strong&gt;mengada-adakan&lt;/strong&gt; rahbaniyyah.’&lt;/em&gt; (&lt;a href=&quot;https://tafsirweb.com/10723-quran-surat-al-hadid-ayat-27.html&quot;&gt;&lt;strong&gt;QS.Al-Hadid:27&lt;/strong&gt;&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;Apa itu rahbaniyah? (Engkau bisa memastikan di link tafsir surah diatas) bahwasanya Rahbaniyah ialah (orang-orang nasrani) tidak beristri atau tidak bersuami dan mengurung diri dalam biara. Allah Subhaanahu wa Ta’aala tidak mewajibkan hal itu kepada mereka, bahkan merekalah yang mewajibkannya dari diri mereka sendiri dengan maksud mencari keridhaan Allah Subhaanahu wa Ta’aala, Subhanallah mereka (nasrani) berkreasi (bid’ah) terhadap agama untuk meraih ridha Allah, Lalu bagaimana dengan kita yang melakukan amalan yang tidak sesuai dengan sabda nabi &lt;strong&gt;“Berpegang teguhlah dengan sunnahku dan sunnah khulafa rasyidin (Abu bakar, Umar bin Khattab, Utsman bin Affan, Ali bin Abi Thalib)&lt;/strong&gt;”, Apakah amalan kita diterima? Maka telah di tulis oleh &lt;strong&gt;Imam Nawawi dalam Al Arba’in An Nawawiyah No:5&lt;/strong&gt; bahwasanya,&lt;/p&gt;

&lt;p&gt;مَنْ عَمِلَ عَمَلاً لَيْسَ عَلَيْهِ أَمْرُنَا فَهُوَ رَدٌّ&lt;/p&gt;

&lt;p&gt;“&lt;em&gt;Barangsiapa melakukan suatu amalan yang bukan ajaran kami, maka amalan tersebut tertolak.&lt;/em&gt;” (&lt;strong&gt;HR. Muslim no. 1718&lt;/strong&gt;).&lt;/p&gt;

&lt;p&gt;Kemudian dalam sudut pandang lain, bid’ah secara bahasa, &lt;strong&gt;pakar bahasa&lt;/strong&gt; mendefinisikan &lt;strong&gt;bid’ah&lt;/strong&gt; sebagai &lt;strong&gt;segala sesuatu (tidak hanya agama) yang diamalkan tanpa ada contoh sebelumnya.&lt;/strong&gt; Sebagaimana firman Allah Ta’ala,&lt;/p&gt;

&lt;p&gt;قُلْ مَا كُنتُ بِدْعاً مِّنَ الرُّسُلِ&lt;/p&gt;

&lt;p&gt;&lt;em&gt;“Katakanlah: ‘Aku bukanlah Rasul yang pertama di antara Rasul-Rasul.’”&lt;/em&gt; (&lt;strong&gt;QS. Al-Ahqaaf: 9&lt;/strong&gt;)&lt;/p&gt;

&lt;p&gt;Muhammad Al-Ruwaifi’ Al-Irfiqiy (Imam Ahli Bahasa, mesir) menjelaskan,&lt;/p&gt;

&lt;p&gt;أي ما كنت أول من أرسل، قد أرسل قبلي رسل كثير&lt;/p&gt;

&lt;p&gt;(Yang di maksud bid’ah pada ayat al-ahqaf) &lt;em&gt;“Maksudnya aku bukanlah Rasul pertama yang diutus, sesungguhnya telah diutus sebelumku banyak rasul.”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Oleh karena itu yang terlarang adalah bid’ah dalam agama bukan dalam perkara dunia, sebagaimana orang-orang shalih terdahulu sholat subuh 2 rokaat dengan memakai gamis, maka bukanlah bi’dah kita sholat subuh 2 rokaat memakai sarung &lt;em&gt;(yang terpenting menutup aurat, suci dari najis dan telah kita ketahui bersama gamis pakaian sempurna dalam menutup aurat)&lt;/em&gt;, sedangkan termasuk bid’ah ialah apabila &lt;em&gt;(sengaja)&lt;/em&gt; menambah rokaat (3 rokaat sholat subuh), menambah amalan yang tidak sesuai sunnah dalam sholat, ataupun berkreasi dalam bentuk ibadah lainnya, yang demikian adalah bid’ah meski dia bergamis.  Wahai saudaraku, &lt;em&gt;-semoga Allah memberi kita taufiq-&lt;/em&gt; sekarang telah jelas makna bid’ah baik secara bahasa ataupun dalam agama, Insyaallah. Walhamdulillah semoga dengan datangnya risalah ini bisa menjadikan tambahan ilmu ataupun muroja’ah (sebagai pengingat kembali), penambah semangat dalam mempelajari ilmu agama islam kemudian diamalkan dalam kehidupan sehari-hari insyaallah. Harapan besar setelah datangnya risalah ini, kita selangkah lebih maju, tidak stagnan, terlebih &lt;em&gt;Tilmiidzun Jadid&lt;/em&gt;, seakan-akan kita &lt;em&gt;murid baru&lt;/em&gt; yang mengatakan segala fasilitas peribadatan (mic,audio kajian, dll) bid’ah, Na’am &lt;em&gt;-hadanallah, (semoga Allah beri kita hidayah)-&lt;/em&gt; harusnya kita yang &lt;em&gt;su’udzon&lt;/em&gt; (prasangka baik) barangkali yang berkata demikian lebih Alim (berilmu) yang di maksud mungkin bid’ah secara bahasa, &lt;em&gt;-Hadanallah waiyyakum ajma’in (Semoga Allah selalu memberi petunjuk (kebenaran) kepada kami dan antum semua)-&lt;/em&gt;.&lt;/p&gt;

&lt;h1 id=&quot;penutup&quot;&gt;Penutup&lt;/h1&gt;

&lt;p&gt;Risalah ini dibuat (&lt;em&gt;dari berbagai rujukan sumber yang shahih (valid) insyaallah&lt;/em&gt;) di Situbondo, Kamis, 24 Rajab 1441 (19 Maret 2020), di kala negeriku (indonesia) dan dunia tersibukkan dengan wabah corona, berharap kita tidak hanya disibukkan dengan corona melainkan juga disibukkan dengan sunnah (Termasuk sunnah adalah mentaati pemimpin dalam hal kebenaran(mengikuti himbauan pemerintah dalam menanggulangi wabah ini) dan mengikuti sunnah rosulullah di kalah wabah (tho’un) untuk tidak bepergian ke wilayah wabah dan jika wabah telah melanda untuk tetap ditempat dimana berada), kembali mengingat Allah (dzikrullah) membentengi diri dengan dzikir pagi petang, dan upaya-upaya lain baik secara fisik dan rohani, memang benar kematian adalah taqdir Allah dan adalah tawakkal menyerahkan segala keputusannya pada Allah tanpa menafikan (meniadakan) upaya meraih kebaikan. &lt;em&gt;-Nas-alullaha as Salamah wal afiah (kita memohon kepada ALLAH keselamatan dan kebaikan)-&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Aku memohon kepada Allah ta’ala dengan nama-namaNya yang baik dan sifat-sifat-Nya yang tinggi, agar Dia berkenan menjadikanku dan engkau wahai saudaraku yang aku cinta karena Allah, menjadi termasuk orang-orang yang meniti sunnah, berpegang teguh kepadanya dalam perkataan dan perbuatan, serta dalam seluruh keadaan. Sesungguhnya Dia kuasa untuk itu. Shalawat, salam dan keberkahan mudah-mudahan tercurah kepada Nabi kita Muhammad Shallallahu’alaihi Wasallam, kepada keluarganya, para sahabatnya dan orang-orang yang mengikutnya hingga hari akhir zaman. &lt;em&gt;-Wa akhiru da’wana anil hamdulillahi rabbil alamin-&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Semoga ikhlas karena Allah, Robbana taqobbal minna innaka antas sami’ul ‘alim&lt;/em&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;em&gt;Al-Faqir ‘ila Maghfirah Robbihi&lt;/em&gt;
&lt;br /&gt;
Curah Jeru Tengah, Situbondo&lt;/p&gt;

&lt;h3 id=&quot;hadiah&quot;&gt;Hadiah&lt;/h3&gt;

&lt;p&gt;Rasulullah Sallallahu ‘Alaihi Wa Sallam bersabda “تهدوا تحابوا ” (Tahaddu tahabbu), yang artinya
&lt;em&gt;“saling memberilah hadiah, maka kalian akan saling menyayangi”&lt;/em&gt; (&lt;strong&gt;HR. Thabrani&lt;/strong&gt;).&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;http://books.islamway.net/id/id_Sunnah_Sunnah_rasulullah_sehari_hari.pdf&quot;&gt;Al-Minhul ‘Aliyyah fii Bayan As-Sunanil Yaumiyyah&lt;/a&gt; - Terjemahan Kitab &lt;strong&gt;Hadiah Indah Penjelasan Tentang Sunnah-Sunnah Sehari-Hari (shallallahu alaihi wa sallam)&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://drive.google.com/open?id=1ovvN45lc6iJdcXi4tlpeNj6lvYoUljo-&quot;&gt;Dzikir Pagi Petang&lt;/a&gt; - Dzikir Pagi Petang sesuai sunnah (ukuran saku) lengkap dengan faidah dan hadits.&lt;/li&gt;
&lt;/ul&gt;

</description>
        <pubDate>Thu, 19 Mar 2020 06:06:42 +0000</pubDate>
        <link>https://creatorbe.github.io/islam/2020/03/19/arti-sunnah-rosul.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/islam/2020/03/19/arti-sunnah-rosul.html</guid>
        
        
        <category>islam</category>
        
      </item>
    
      <item>
        <title>Cara Install Postman di Ubuntu</title>
        <description>&lt;p align=&quot;center&quot;&gt;
  &lt;img src=&quot;https://s3.amazonaws.com/postman-static-getpostman-com/postman-docs/WS-Collection_headers.png&quot; alt=&quot;postman&quot; /&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Bismillah …&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Postman, tentu kamu (developer) tidak asing lagi dengan salah satu ini tool ini. Salah satu tool untuk menguji &lt;a href=&quot;https://en.wikipedia.org/wiki/Application_programming_interface&quot;&gt;API&lt;/a&gt; (Application Programing Interface) dengan beberapa fitur yang nyaman bagi kita untuk berkolaborasi dengan team dalam proyek kita. Tentu untuk menghemat waktu, disini saya tidak membahas detail mengenai postman anda bisa merujuk pada dokumentasi di &lt;a href=&quot;https://www.getpostman.com/docs/&quot;&gt;getpostman/docs&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Merujuk pada judul konten, saya yakin banyak developer yang dulunya menggunakan tool ini di add on chrome dan kabar baiknya postman sudah merilis aplikasi native dengan dukungan multi platform. Anda bisa mendapatkan file installer nya di &lt;a href=&quot;https://www.getpostman.com/apps&quot;&gt;getpostman.com/apps&lt;/a&gt;, namun hingga saat ini di web resmi postman belum melampirkan tutorial instalasinya, (khususnya untuk pengguna linux) dan berikut ini cara instalasi postman di ubuntu via command line interfaces (terminal,dll).&lt;/p&gt;

&lt;p&gt;Unpack file installer yang sebelumnya telah anda download (saya unpack ke folder opt)&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo tar&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-xzf&lt;/span&gt; postman.tar.gz &lt;span class=&quot;nt&quot;&gt;-C&lt;/span&gt; /opt
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Kemudian lakukan symbolic link, ini berguna agar postman bisa di panggil via CLI.&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo ln&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-s&lt;/span&gt; /opt/Postman/Postman /usr/bin/postman
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Lalu, buat shortcut untuk bisa di pin panel ubuntu atau muncul dalam pencarian aplikasi anda.&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;cat&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; ~/.local/share/applications/postman.desktop &lt;span class=&quot;o&quot;&gt;&amp;lt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;EOL&lt;/span&gt;&lt;span class=&quot;sh&quot;&gt;
[Desktop Entry]
Encoding=UTF-8
Name=Postman
Exec=postman
Icon=/opt/Postman/resources/app/assets/icon.png
Terminal=false
Type=Application
Categories=Development;
&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;EOL
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Selesai, kini anda bisa memulai menggunakan postman.&lt;/p&gt;

&lt;h2 id=&quot;apt-get-install-postman&quot;&gt;apt-get install postman&lt;/h2&gt;

&lt;p&gt;Yup, tentu konten ini yang anda tunggu ;p (&lt;em&gt;so sorry, actually it isn’t apt-get install postman but this is an apt-get install postman&lt;/em&gt; :D )  tutorial instalasi postman yang saya jabarkan diatas insyaallah secara ijma &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;linux&lt;/code&gt;us&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;er&lt;/code&gt; sepakat itu mudah, namun disini saya hanya ingin sedikit membantu anda dalam menghemat waktu (&lt;strong&gt;العصر&lt;/strong&gt; : &lt;em&gt;Al-‘Asr ~ QS:103, Allah azza wa jalla tuhan pencipta waktu bersumpah pada ciptaannya yakni waktu, dengan kata lain waktu itu penting dan hendaknya anda memperhatikannya&lt;/em&gt;) maka dari itu berhubung sampai tutorial ini ditulis belum ada ppa yang available untuk postman sementara ini alternatif yang bisa digunakan menggunakan bash script untuk lebih handy ~ mudah dalam menangani apabila anda mendapat notif update dari postman, cukup mengeksekusi ulang command ini untuk update postman anda.&lt;/p&gt;

&lt;p&gt;Well, dengan command dibawah ini anda bisa install postman sekaligus update postman apabila terdapat notif update.&lt;/p&gt;
&lt;div class=&quot;language-shell highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;bash &amp;lt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;wget &lt;span class=&quot;nt&quot;&gt;-O&lt;/span&gt; - https://raw.githubusercontent.com/CreatorB/Postman/master/apt-get-install-postman.sh&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Berikut SS (screenshot) instalasi postman via apt-get-install-postman diatas.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://raw.githubusercontent.com/CreatorB/Postman/master/creatorbe-postman.png&quot; alt=&quot;creatorb-postman&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Sekian, semoga bermanfaat.&lt;/p&gt;

&lt;h3 id=&quot;related-link&quot;&gt;Related link&lt;/h3&gt;
&lt;p&gt;Github Repo apt-get install postman &lt;a href=&quot;https://github.com/CreatorB/Postman&quot;&gt;github.com/creatorb/postman&lt;/a&gt;&lt;/p&gt;
</description>
        <pubDate>Thu, 08 Mar 2018 10:42:13 +0000</pubDate>
        <link>https://creatorbe.github.io/programming/2018/03/08/cara-install-postman-di-ubuntu-apt-get-install-postman-creatorb.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/programming/2018/03/08/cara-install-postman-di-ubuntu-apt-get-install-postman-creatorb.html</guid>
        
        
        <category>programming</category>
        
      </item>
    
      <item>
        <title>Ansshot - Android Simple Screenshot</title>
        <description>&lt;p&gt;Hi! this is just an another cheat to make your life easier, especially for android developer (just make sure you’ve been installed adb and make it on path).&lt;/p&gt;

&lt;p&gt;4 1st, It’s short talk about &lt;a href=&quot;https://developer.android.com/studio/command-line/adb.html&quot;&gt;Android Debug Bridge (ADB)&lt;/a&gt;, how it could be timesaver to take screenshot or even record your android screen by simple command.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Screenshot&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;adb shell screencap &lt;span class=&quot;nt&quot;&gt;-p&lt;/span&gt; /directory/file.png
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Screen Record&lt;/strong&gt;&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;adb shell screenrecord /directory/file.mp4
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;hr /&gt;

&lt;h2 id=&quot;improvement&quot;&gt;&lt;strong&gt;Improvement&lt;/strong&gt;&lt;/h2&gt;

&lt;p&gt;Think like a Programmer, Cool but not enough, ewwh there’s little bit wasted, yeah yah yah still long syntax and take a time for renaming. If you run on unix machine (you should!) you can make it as aliases on ~/.bashrc .&lt;/p&gt;

&lt;p&gt;&lt;em&gt;.bashrc&lt;/em&gt;&lt;/p&gt;
&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;alias &lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;ansshot&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;adb shell screencap -p | perl -pe &apos;s/&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\x&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;0D&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\x&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;0A/&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\x&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;0A/g&apos; &amp;gt; ./ansshot-&lt;/span&gt;&lt;span class=&quot;sb&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;date&lt;/span&gt; +%Y%m%d%H%M%S&lt;span class=&quot;sb&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;.png&quot;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Well, now you can call it easy by type &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;ansshot&lt;/code&gt; or whatever word you put on aliases, it will take screenshot and automatically save in current directory as png file with format name ansshot - date time taken.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;&lt;strong&gt;Tips:&lt;/strong&gt; 
For windows user (*Cygwin).  Try to use :
&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;adb shell screencap -p | sed &apos;s/\r$//&apos; &amp;gt; file.png&lt;/code&gt;
or another perl like:
&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;adb shell screencap -p | perl -pe &apos;s/\x0D\x0A/\x0A/g&apos; &amp;gt; file.png&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;a-way&quot;&gt;&lt;strong&gt;A Way&lt;/strong&gt;&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;this is for the sake of simplicity&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Yeah for you &lt;strong&gt;who’s man keep going, lazy doing&lt;/strong&gt;. Just take minutes for me to give you a simple bash, feel free enjoy it (&lt;em&gt;don’t worry no inject code, hahah!&lt;/em&gt;).&lt;/p&gt;

&lt;p&gt;Here you go!&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;curl -s https://git.io/vS9Zy | sh&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Bye! &lt;em&gt;See yah…&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;./creatorb&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;i class=&quot;icon-hdd&quot;&gt;&lt;/i&gt; Powerlink&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/CreatorB/Ansshot&quot;&gt;github.com/creatorb/ansshot&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://gist.github.com/CreatorB/1c15fa87af047395d0392409eaeca203&quot;&gt;gist - ADB screenshot real device&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</description>
        <pubDate>Thu, 06 Apr 2017 20:33:05 +0000</pubDate>
        <link>https://creatorbe.github.io/en/programming/android/minds/2017/04/06/ansshot-creatorbe.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/en/programming/android/minds/2017/04/06/ansshot-creatorbe.html</guid>
        
        
        <category>en</category>
        
        <category>programming</category>
        
        <category>android</category>
        
        <category>minds</category>
        
      </item>
    
      <item>
        <title>ODA - Optimasi Development Android</title>
        <description>&lt;p&gt;Bukan tentang cerita dimasa lalu ataupun coretan kisah yang tertelan waktu, tapi sebuah catatan pribadi yang ditulis untuk mudah dicari dan semoga tidak hanya bermanfaat bagi diri ini.&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Efisiensi bukan dari seberapa banyak aksi&lt;/code&gt;
&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;tapi keadaan dimana aktivitas yang tidak diperlukan berhenti&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;~creatorbe&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TALK LESS, TWEAK MORE&lt;/strong&gt;&lt;/p&gt;

&lt;h2 id=&quot;list&quot;&gt;List&lt;/h2&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;#android-studio&quot;&gt;Android Studio&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#gradle-script&quot;&gt;Gradle Script&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;#gradle-properties&quot;&gt;Gradle Properties&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#build-gradle&quot;&gt;Build Gradle&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;debugging-devices&quot;&gt;Debugging Devices&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;Menggunakan real devices / smartphone android akan lebih menghemat proses kompilasi.&lt;/li&gt;
      &lt;li&gt;Memperbarui hardware, terutama RAM komputer.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#coming-soon&quot;&gt;Coming Soon&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;android-studio&quot;&gt;Android Studio&lt;/h3&gt;

&lt;p&gt;Pada android studio secara default program bekerja pada mode online dikarenakan untuk memudahkan sinkronisasi dalam proyek (contoh : library) dan melakukan pengecekan berkala untuk melihat versi terbaru. Jika anda tidak memerlukan depensi terbaru anda bisa menonaktifkan fitur ini dan membiarkan gradle menggunakan cache dari library. Buka jendela setting pada android studio, Centang offline work dan pastikan menggunakan gradle yang ada di direktori lokal.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://raw.githubusercontent.com/CreatorB/res/master/pic/improve-android-development-creatorbe.png&quot; alt=&quot;android-offline-work&quot; /&gt;&lt;/p&gt;

&lt;h3 id=&quot;gradle-script&quot;&gt;Gradle Script&lt;/h3&gt;

&lt;h4 id=&quot;gradle-properties&quot;&gt;Gradle Properties&lt;/h4&gt;

&lt;p&gt;Berikut beberapa opsi tweak pada &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;gradle.properties&lt;/code&gt; untuk penjelasan saya cantumkan dalam kode.&lt;/p&gt;

&lt;div class=&quot;language-gradle highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;err&quot;&gt;#&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Di&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;beberapa&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;versi&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;gradle&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;secara&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;gradle&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;daemon&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;dalam&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;keadaan&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;mati&lt;/span&gt;
&lt;span class=&quot;err&quot;&gt;#&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Tentu&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;dengan&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;menghidupkannya&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;tidak&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;perlu&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;melakukan&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;proses&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;startup&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;berulang&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;kali&lt;/span&gt;

&lt;span class=&quot;n&quot;&gt;org&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;gradle&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;daemon&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;

&lt;span class=&quot;err&quot;&gt;#&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Opsi&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;spesifik&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;dalam&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;menentukan&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;JVM&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;arguments&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;pada&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;proses&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;daemon&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;dimana&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;hal&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;ini&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;mempengaruhi&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;kinerja&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;memori&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;err&quot;&gt;#&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Default&lt;/span&gt; &lt;span class=&quot;nl&quot;&gt;value:&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Xmx10248m&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;XX:&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;MaxPermSize&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;256&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;m&lt;/span&gt;

&lt;span class=&quot;n&quot;&gt;org&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;gradle&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;jvmargs&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Xmx2048m&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;XX:&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;MaxPermSize&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;512&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;m&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;XX:&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;HeapDumpOnOutOfMemoryError&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Dfile&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;encoding&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;UTF&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;8&lt;/span&gt;

&lt;span class=&quot;err&quot;&gt;#&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Bagus&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;untuk&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;project&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;mandiri&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;dengan&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;beberapa&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;banyak&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;modul&lt;/span&gt;
&lt;span class=&quot;err&quot;&gt;#&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Namun&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;perlu&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;hati&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;hati&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;jika&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;bekerja&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;dalam&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;team&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;karena&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;mungkin&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;akan&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;terjadi&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;konflik&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;diantara&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;modul&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;karena&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;adanya&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;keharusan&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;memiliki&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;modul&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;lain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;

&lt;span class=&quot;n&quot;&gt;org&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;gradle&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;parallel&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;

&lt;span class=&quot;err&quot;&gt;#&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Dalam&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;dokumentasi&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;gradle&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;opsi&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;ini&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;menjalankan&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;gradle&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;hanya&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;pada&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;proyek&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;yang&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;melakukan&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;permintaan&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;
&lt;span class=&quot;err&quot;&gt;#&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Semakin&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;anda&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;memiliki&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;banyak&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;modul&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;yang&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;terkait&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;maka&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;semakin&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;banyak&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;juga&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;waktu&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;yang&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;diminimalisir&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;  

&lt;span class=&quot;n&quot;&gt;org&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;gradle&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;configureondemand&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Rujukan :&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://docs.gradle.org/current/userguide/gradle_daemon.html&quot;&gt;docs.gradle.org/current/userguide/gradle_daemon.html&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://docs.gradle.org/current/userguide/userguide_single.html#sec:gradle_configuration_properties&quot;&gt;docs.gradle.org/current/userguide/userguide_single.html&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects&quot;&gt;gradle.org/docs/current/userguide/multi_project_builds.html&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:configuration_on_demand&quot;&gt;gradle.org/docs/current/userguide/multi_project_builds.html&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id=&quot;build-gradle&quot;&gt;Build Gradle&lt;/h4&gt;

&lt;p&gt;Seperti pembahasan sebelumnya mengenai parameter jvm di &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;gradle.properties&lt;/code&gt; anda juga bisa meletakkanya pada file &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;build.gradle&lt;/code&gt; seperti berikut.&lt;/p&gt;

&lt;div class=&quot;language-gradle highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;n&quot;&gt;dexOptions&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;javaMaxHeapSize&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;8g&quot;&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;jumboMode&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;blockquote&gt;
  &lt;p&gt;8g = 8GB&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Rujukan :&lt;/strong&gt; &lt;a href=&quot;http://google.github.io/android-gradle-dsl/current/&quot;&gt;google.github.io/android-gradle-dsl/current&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Kali ini kembali mengingat kenangan lolipop (API 21) tentu membawa ingatan kita pada ART, dimana jika minSdkVersion jauh dibawah itu maka akan di generate dex yang berjalan dikeduanya baik ART atau pendahulunya JVM. Tapi yang beda jika kita setting pada opsi API 21 (menggunakan ART) dimana salah satu fiturnya tidak memerlukan main dex tadi sebelum MultiDex.install(), hal ini tentu meminimalisir waktu dalam pengecekan class pada main dex. Anda bisa membaca &lt;a href=&quot;http://developer.android.com/tools/building/multidex.html#dev-build&quot;&gt;developer.android.com/multidex&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Opsi tweak pada &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;build.gradle&lt;/code&gt; menambahkan minSdkVersion.&lt;/p&gt;

&lt;div class=&quot;language-gradle highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;n&quot;&gt;defaultConfig&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;applicationId&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;io.github.creatorbe.optimization&quot;&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;minSdkVersion&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;15&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;targetSdkVersion&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;25&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;versionCode&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;versionName&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;1.0&quot;&lt;/span&gt;
    &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;dimana dalam penerapan proyek sebenarnya, tentu anda bisa menggunakan fitur &lt;a href=&quot;http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Multi-flavor-variants&quot;&gt;multi flavors&lt;/a&gt; yang keren emang :p .&lt;/p&gt;

&lt;div class=&quot;language-gradle highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;n&quot;&gt;android&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;flavorDimensions&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;rilisDimension&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;devDimension&quot;&lt;/span&gt;
    
    &lt;span class=&quot;n&quot;&gt;productFlavors&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;c1&quot;&gt;// versi improvements&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;fastBuild&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;minSdkVersion&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;21&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;dimension&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;devDimension&quot;&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;regular&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;c1&quot;&gt;//  min sdk versi development&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;minSdkVersion&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;14&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;dimension&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;devDimension&quot;&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
        
        &lt;span class=&quot;c1&quot;&gt;// versi release pasaran&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;free&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;dimension&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;rilisDimension&quot;&lt;/span&gt;
            &lt;span class=&quot;c1&quot;&gt;//&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;pay&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;dimension&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;rilisDimension&quot;&lt;/span&gt;
            &lt;span class=&quot;c1&quot;&gt;//&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
        
    &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
    
    &lt;span class=&quot;c1&quot;&gt;//&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;coming-soon&quot;&gt;Coming Soon&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;i’m still working on awesome android development optimization, …&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;next time insyaallah i will post an another development tips, btw in the wild it isn’t only about optimization but yours app on privation&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;./creatorb&lt;/p&gt;

</description>
        <pubDate>Mon, 03 Apr 2017 20:33:05 +0000</pubDate>
        <link>https://creatorbe.github.io/programming/android/minds/2017/04/03/oda-optimasi-development-android-creatorbe.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/programming/android/minds/2017/04/03/oda-optimasi-development-android-creatorbe.html</guid>
        
        
        <category>programming</category>
        
        <category>android</category>
        
        <category>minds</category>
        
      </item>
    
      <item>
        <title>Hello android World!</title>
        <description>&lt;p&gt;Sepertinya halnya belajar bahasa pemprograman lain, pelajaran pertama adalah bagaimana menampilkan kalimat sapaan yang tidak asing lagi, hello world (in our side we say “Assalamualaikum World!”). Berikut tahapan pembuatan proyek baru android dimana ini bisa di implementasikan di setiap saat anda membuat proyek android baru.&lt;/p&gt;

&lt;h3 id=&quot;cara-membuat-proyek-baru&quot;&gt;Cara Membuat Proyek Baru&lt;/h3&gt;

&lt;ol&gt;
  &lt;li&gt;Pada jendela aktif android studio pilih create new project untuk membuat proyek baru.
    &lt;ul&gt;
      &lt;li&gt;jika anda baru saja melakukan instalasi dan menjalankan pertama kali android studio anda maka akan masuk tampilan awal dari android studio di jendela &lt;strong&gt;Welcome to Android Studio&lt;/strong&gt; kemudian pilih &lt;strong&gt;Start a New Android Studio project&lt;/strong&gt;.&lt;/li&gt;
      &lt;li&gt;tapi jika anda sebelumnya telah membuat proyek android atau masuk pada tampilan proyek android maka tinggal pilih menu &lt;strong&gt;File &amp;gt; New Project&lt;/strong&gt;.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Maka selanjutnya akan masuk pada form untuk mengisi nama aplikasi, domain (akan berpengaruh pada nama package di proyek android), dan beberapa opsi lainya.
    &lt;ul&gt;
      &lt;li&gt;&lt;strong&gt;Application Name&lt;/strong&gt; : “HelloWorld” (isi dengan nama aplikasi anda).&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Company Domain&lt;/strong&gt; : “creatorbe.github.io” (isi dengan nama domain anda).
dengan konfigurasi diatas nantinya nama package proyek anda akan berupa io.github.creatorbe.helloworld kemudian &lt;strong&gt;Next&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Target Android Devices&lt;/strong&gt; anda bisa memilih banyak pilihan diantaranya &lt;strong&gt;Phone and Tablet&lt;/strong&gt;, &lt;strong&gt;Wear&lt;/strong&gt;, &lt;strong&gt;Tv&lt;/strong&gt;, &lt;strong&gt;Android Auto&lt;/strong&gt;, &lt;strong&gt;Glass&lt;/strong&gt; dan bisa jadi akan terus berkembang jika nantinya ada release platform baru, disini anda bisa membiarkan konfigurasi ini default sebagai &lt;strong&gt;Phone and Tablet&lt;/strong&gt; dengan minimum sdk API 15 (lebih jelas tentang API anda bisa merujuk pada pembahasan &lt;a href=&quot;https://developer.android.com/guide/topics/manifest/uses-sdk-element.html#ApiLevels&quot;&gt;API LEVEL&lt;/a&gt;).&lt;/li&gt;
      &lt;li&gt;Kemudian menu berikutnya adalah &lt;strong&gt;Add an Activity to Mobile&lt;/strong&gt; pilih &lt;strong&gt;Empty Activity&lt;/strong&gt; dan &lt;strong&gt;Next&lt;/strong&gt;.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Selanjutnya pada jendela &lt;strong&gt;Customize the Activity&lt;/strong&gt; anda bisa membiarkan konfigurasi ini default, dimana &lt;strong&gt;Acitivity Name&lt;/strong&gt; sebagai &lt;em&gt;MainActivity&lt;/em&gt; dimana nantinya ini akan menjadi file java dan untuk &lt;strong&gt;Layout Name&lt;/strong&gt; berisi &lt;em&gt;activity_main&lt;/em&gt; nantinya ini akan menjadi nama tampilan file xml. kemudian &lt;strong&gt;Finish&lt;/strong&gt;. Sejauh ini anda telah berhasil membuat proyek baru bernama HelloWorld.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;memulai-pemprograman-android-dasar&quot;&gt;Memulai Pemprograman Android Dasar&lt;/h3&gt;

&lt;p&gt;Sebelum masuk pada bahasa pemprograman, ada baiknya ada mengulas pembahasan lalu mengenai &lt;a href=&quot;https://creatorbe.github.io/programming/android/2017/03/30/memahami-struktur-project-di-android-studio-creatorbe.html&quot;&gt;Memahami Struktur Proyek Android&lt;/a&gt; untuk menjaga kesepahaman dan tidak terjadi pembahasan ulang disini. Umumnya pada proses pengembangan android anda akan lebih banyak di sibukkan dengan mengerjakan beberapa pemprograman di lingkup tertentu saja seperti halnya berikut:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;app &amp;gt; java &amp;gt; io.github.creatorbe.helloworld &amp;gt; MainActivity.java&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;MainActivity.java salah satu output file yang tadi nya anda buat di jendela &lt;strong&gt;Customize the Activity&lt;/strong&gt;. File java di direktori ini bisa di isi kompleksitas kode yang di dalammnya mengatur bagaimana aplikasi android berjalan, baik itu memerintah UI untuk berjalan, menangani proses dibelakang layar, berkomunikasi antar devices  ataupun koneksi dengan database. Dalam development android file java nantinya akan di konversi dalam bentuk dex dalam paket apk. File ini berisi sebagian besar fungsi dan logika pemprogramman yang berjalan pada aplikasi.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;app &amp;gt; res &amp;gt; layout &amp;gt; activity_main.xml&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Dalam direktori layout akan dijumpai banyak ekstensi file.xml disana untuk konfigurasi user interface antara aplikasi dan pengguna, disini kita memprogram bagaimana tampilan pada suatu aplikasi.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;app &amp;gt; manifests &amp;gt; AndroidManifest.xml&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Berisi konfigurasi global, mendefinisasikan tiap tiap komponen dalam aplikasi android, semisal nama aplikasi, target versi os, orientasi, dll.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Gradle Scripts &amp;gt; build.gradle&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Mengenai gradle sendiri telah di jelaskan di pembahasan &lt;a href=&quot;https://creatorbe.github.io/programming/android/2017/03/30/apa-sih-pengertian-gradle-creatorbe.html&quot;&gt;Apa itu Gradle&lt;/a&gt; dimana di setiap proyek android memiliki gradle dengan fungsi dasar untuk mengompilasi dan membangun aplikasi dari proyek yang kita kerjakan ataupun menambahkan depensi library yang di butuhkan.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Demikian, sebagian besar proses pembangunan aplikasi android akan terfokus di empat hal diatas.&lt;/p&gt;

&lt;h3 id=&quot;koding&quot;&gt;Koding&lt;/h3&gt;

&lt;p&gt;&lt;img src=&quot;https://raw.githubusercontent.com/CreatorB/res/master/pic/helloandroidworld-creatorbe.gif&quot; alt=&quot;hello-android-world-creatorbe&quot; /&gt;&lt;/p&gt;

&lt;p&gt;*Pastikan anda mengikuti instruksi sampai tahap 3 pada &lt;a href=&quot;#cara-membuat-proyek-baru&quot;&gt;Cara Membuat Proyek Baru&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Dalam pembahasan ini tidak hanya mencetak hello world tapi beberapa contoh kodingan sederhana lainya, pastikan anda sudah membuat activity baru yang diperlukan yaitu Main2Activity.java dan activity_main2.xml dengan cara klik &lt;strong&gt;File &amp;gt; New &amp;gt; Activity &amp;gt; Empty Activity&lt;/strong&gt; (*centang generate layout file untuk otomatis membuat file xml nya) untuk nama bisa anda rubah atau biarkan default seperti yang saya contohkan.&lt;/p&gt;

&lt;p&gt;Pada dasarnya membuat tampilan user interface pada android sangatlah mudah, bisa menggunakan fitur drag and drop dimenu design xml dan disini yang akan saya bahas adalah versi text nya. Mungkin langsung saja kita akan melanjutkan untuk membuat program hello world android dengan beberapa pemprograman dasar, untuk memudahkan visualisasi, saya akan menjelaskan masing masing kode inline dalam bentuk komentar.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CHAT LESS, CODE MORE&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;activity_main.xml&lt;/em&gt;&lt;/p&gt;

&lt;div class=&quot;language-xml highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;cp&quot;&gt;&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt;&lt;/span&gt;
&lt;span class=&quot;c&quot;&gt;&amp;lt;!--pakai layout linear untuk menampilkan semua komponen dalam bentuk sejajar--&amp;gt;&lt;/span&gt;
&lt;span class=&quot;c&quot;&gt;&amp;lt;!--Anda bisa memilih layout mendatar/horizontal atau dalam bentuk vertikal--&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;LinearLayout&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;xmlns:android=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;http://schemas.android.com/apk/res/android&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;xmlns:tools=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;http://schemas.android.com/tools&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:orientation=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;vertical&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;match_parent&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;match_parent&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingBottom=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_vertical_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingLeft=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_horizontal_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingRight=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_horizontal_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingTop=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_vertical_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;tools:context=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;io.github.creatorbe.helloworld.MainActivity&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--menampilkan text dalam bentuk inline code--&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;TextView&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:textStyle=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;bold&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:text=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Assalamualaikum&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--menampilkan text dengan memanggil value dari variabel tag--&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--string di folder values/strings--&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;TextView&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:text=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@string/tag&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--menampilkan gambar dari folder res/drawable--&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;ImageView&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@drawable/banner&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--layout linear baru dengan orientasi horizontal--&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;LinearLayout&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:orientation=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;horizontal&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:background=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;#ffffff&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;

        &lt;span class=&quot;c&quot;&gt;&amp;lt;!--edittext komponen dalam android semacam placeholder--&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;EditText&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@+id/editText&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:layout_marginLeft=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;16dp&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:hint=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@string/comment&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:inputType=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;textPersonName&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;

        &lt;span class=&quot;c&quot;&gt;&amp;lt;!--contoh menampilkan tombol dalam android--&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;Button&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@+id/button&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:layout_marginLeft=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;16dp&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:text=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@string/button_send&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;

        &lt;span class=&quot;nt&quot;&gt;&amp;lt;Button&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@+id/like&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;android:text=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@string/like&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;nt&quot;&gt;&amp;lt;/LinearLayout&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/LinearLayout&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;em&gt;MainActivity.java&lt;/em&gt;&lt;/p&gt;

&lt;div class=&quot;language-java highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;kn&quot;&gt;package&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;io.github.creatorbe.helloworld&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;android.content.Intent&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;android.os.Bundle&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;android.support.v7.app.AppCompatActivity&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;android.view.View&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;android.widget.Button&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;android.widget.EditText&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;android.widget.Toast&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;MainActivity&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;AppCompatActivity&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;

    &lt;span class=&quot;c1&quot;&gt;//membuat konstan komentar&lt;/span&gt;
    &lt;span class=&quot;kd&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;final&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;String&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;MESSAGES&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;io.github.creatorbe.helloworld.MESSAGE&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;c1&quot;&gt;//deklarasi Onclicklistener sebagai object yang nantinya bisa di passing dengan Komentari&lt;/span&gt;
    &lt;span class=&quot;kd&quot;&gt;private&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;View&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;OnClickListener&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Komentari&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;View&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;OnClickListener&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(){&lt;/span&gt;
        &lt;span class=&quot;kd&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;kt&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;onClick&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;View&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;v&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;){&lt;/span&gt;
            &lt;span class=&quot;c1&quot;&gt;//intent salah satu obyek yang bisa menjembati beberapa komponen&lt;/span&gt;
            &lt;span class=&quot;nc&quot;&gt;Intent&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Intent&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;getApplicationContext&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(),&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Main2Activity&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
            &lt;span class=&quot;c1&quot;&gt;// diatas adalah kode menghubungkan kontek (MainActivity) dengan Main2Activity&lt;/span&gt;

            &lt;span class=&quot;c1&quot;&gt;//inisialisasi edittext/placeholder pada ui activity_main&lt;/span&gt;
            &lt;span class=&quot;nc&quot;&gt;EditText&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;et&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;EditText&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;findViewById&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;R&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;editText&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
            &lt;span class=&quot;c1&quot;&gt;//passing dari input menjadi string&lt;/span&gt;
            &lt;span class=&quot;nc&quot;&gt;String&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;comment&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;et&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;getText&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;().&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;toString&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;();&lt;/span&gt;
            &lt;span class=&quot;c1&quot;&gt;//methods untuk mengirim value dari intent dengan paramater key,value&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;putExtra&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;MESSAGES&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
            &lt;span class=&quot;c1&quot;&gt;// dimana MESSAGES sebagai key, reusable&lt;/span&gt;
            &lt;span class=&quot;c1&quot;&gt;// comment sebagai value&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;startActivity&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
            &lt;span class=&quot;c1&quot;&gt;//kemudian startActivity salah satu methods untuk menjalankan i&lt;/span&gt;
            &lt;span class=&quot;c1&quot;&gt;// dimana i sebelumnya di inisialisasikan sbg intent&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;o&quot;&gt;};&lt;/span&gt;

    &lt;span class=&quot;nd&quot;&gt;@Override&lt;/span&gt;
    &lt;span class=&quot;kd&quot;&gt;protected&lt;/span&gt; &lt;span class=&quot;kt&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;onCreate&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Bundle&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;savedInstanceState&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;kd&quot;&gt;super&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;onCreate&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;savedInstanceState&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;setContentView&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;R&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;activity_main&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;

        &lt;span class=&quot;c1&quot;&gt;//inisialisasi button di ui activiy_main&lt;/span&gt;
        &lt;span class=&quot;nc&quot;&gt;Button&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;comment&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Button&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;findViewById&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;R&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
        &lt;span class=&quot;nc&quot;&gt;Button&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;like&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Button&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;findViewById&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;R&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;like&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
        &lt;span class=&quot;c1&quot;&gt;//set aksi pop up ketika button like di klik&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;like&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;setOnClickListener&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;View&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;OnClickListener&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;nd&quot;&gt;@Override&lt;/span&gt;
            &lt;span class=&quot;kd&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;kt&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;onClick&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;View&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;view&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;c1&quot;&gt;//toast/popup memiliki 3 parameter&lt;/span&gt;
                &lt;span class=&quot;c1&quot;&gt;//Toast.makeText(context, text, duration).show();&lt;/span&gt;
                &lt;span class=&quot;nc&quot;&gt;Toast&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;makeText&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;getApplicationContext&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(),&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Liked&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Toast&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;LENGTH_LONG&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;show&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;();&lt;/span&gt;
            &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;});&lt;/span&gt;
        &lt;span class=&quot;c1&quot;&gt;//set aksi ketika button comment di klik dalam inline code dan passing dari Komentari&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;setOnClickListener&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Komentari&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;

    &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;em&gt;activity_main2.xml&lt;/em&gt;&lt;/p&gt;

&lt;div class=&quot;language-xml highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;cp&quot;&gt;&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;LinearLayout&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;xmlns:android=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;http://schemas.android.com/apk/res/android&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;xmlns:tools=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;http://schemas.android.com/tools&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;match_parent&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;match_parent&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:orientation=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;vertical&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingBottom=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_vertical_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingLeft=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_horizontal_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingRight=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_horizontal_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingTop=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_vertical_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;tools:context=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;io.github.creatorbe.helloworld.Main2Activity&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;nt&quot;&gt;&amp;lt;TextView&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@+id/isi_komen&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:text=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;isi komen&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/LinearLayout&amp;gt;&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;em&gt;Main2Activity.java&lt;/em&gt;&lt;/p&gt;

&lt;div class=&quot;language-java highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;kn&quot;&gt;package&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;io.github.creatorbe.helloworld&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;android.content.Intent&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;android.support.v7.app.AppCompatActivity&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;android.os.Bundle&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;android.widget.TextView&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Main2Activity&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;AppCompatActivity&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;

    &lt;span class=&quot;nd&quot;&gt;@Override&lt;/span&gt;
    &lt;span class=&quot;kd&quot;&gt;protected&lt;/span&gt; &lt;span class=&quot;kt&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;onCreate&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Bundle&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;savedInstanceState&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;kd&quot;&gt;super&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;onCreate&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;savedInstanceState&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;setContentView&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;R&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;activity_main2&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;

        &lt;span class=&quot;c1&quot;&gt;//terima string dari MainActivity&lt;/span&gt;
        &lt;span class=&quot;nc&quot;&gt;Intent&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;getIntent&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;();&lt;/span&gt;
        &lt;span class=&quot;nc&quot;&gt;String&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;comment&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;getStringExtra&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;MainActivity&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;MESSAGES&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;

        &lt;span class=&quot;c1&quot;&gt;//set string yang didapat ke textview di activity_main2&lt;/span&gt;
        &lt;span class=&quot;nc&quot;&gt;TextView&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;tv&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;TextView&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;findViewById&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;R&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;isi_komen&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;tv&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;setText&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;comment&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
    &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;em&gt;AndroidManifest.xml&lt;/em&gt;&lt;/p&gt;

&lt;div class=&quot;language-xml highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;cp&quot;&gt;&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;manifest&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;xmlns:android=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;http://schemas.android.com/apk/res/android&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;package=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;io.github.creatorbe.helloworld&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--walaupun aplikasi yang dibuat tidak membutuhkan akses internet tapi ini adalah contoh penerapannya--&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;uses-permission&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;android:name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;android.permission.INTERNET&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--pemasangan hak akses internet pada aplikasi di luar tag application--&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--gambar ikon aplikasi diambil dari folder res/mipmap --&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--label adalah nama aplikasi yang di passing dari string key app_name--&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--theme bisa dirubah pada folder values/styles.xml--&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;c&quot;&gt;&amp;lt;!--intent action main, category launcher mendeklarasikan MainActivity adalah file utama saat aplikasi di jalankan--&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;application&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:icon=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@mipmap/ic_launcher&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:label=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@string/app_name&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:theme=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@style/AppTheme&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;activity&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;android:name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;.MainActivity&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;nt&quot;&gt;&amp;lt;intent-filter&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;nt&quot;&gt;&amp;lt;action&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;android:name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;android.intent.action.MAIN&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;

                &lt;span class=&quot;nt&quot;&gt;&amp;lt;category&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;android:name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;android.intent.category.LAUNCHER&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;nt&quot;&gt;&amp;lt;/intent-filter&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;/activity&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;activity&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;android:name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;.Main2Activity&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;c&quot;&gt;&amp;lt;!--tambah tag navigasi button home --&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;c&quot;&gt;&amp;lt;!--di contoh proyek kali ini tidak begitu riskan dikarenakan mempunyai 1 home/beranda--&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;nt&quot;&gt;&amp;lt;meta-data&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;android:name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;android.support.PARENT_ACTIVITY&quot;&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;android:value=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;.MainActivity&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;/activity&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;/application&amp;gt;&lt;/span&gt;

&lt;span class=&quot;nt&quot;&gt;&amp;lt;/manifest&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Dan kemudian coba jalankan pada emulator android anda atau real device menggunakan smartphone anda, seperti yang saya jelaskan pada pembahasan &lt;a href=&quot;https://creatorbe.github.io/programming/android/2017/03/29/cara-install-android-studio-creatorbe.html#testing-program&quot;&gt;instalasi android studio&lt;/a&gt;. Saya sudah lampirkan untuk source code nya di panel bawah dari postingan ini.&lt;/p&gt;

&lt;p&gt;Kini anda sudah mendapat gambaran dan memahami tahap pembuatan hingga menjadi sebuah aplikasi android, jika anda tertarik silahkan anda kembangkan sendiri baik dengan memulai belajar menggunakan video, ebook atau web blog yang membahas perihal/tutorial android secara rinci, karena kemungkinan besar saya tidak akan membahas nya disini, tapi insyaallah saya akan melanjutkan lebih berfokus pada improvement development, pembahasan pokok atau lebih pada beberapa poin pentingnya saja.&lt;/p&gt;

&lt;p&gt;Berikut beberapa link yang bisa menjadi rujukan anda, tentu saya tidak dapat menuliskan semua link blog history tempat saya belajar, tapi setidaknya ini bisa mewakili bagaimana saya mengawali cerita saya:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://developer.android.com/training/index.html&quot;&gt;Official Android Page&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://www.udacity.com/course/ud853&quot;&gt;Udacity&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;http://stackoverflow.com/documentation/android/topics&quot;&gt;StackOverflow&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;http://www.tutorialspoint.com/android/&quot;&gt;Tutorialspoint&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;irc #android-dev (irc.freenode.net)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Dan berikut beberapa orang orang keren dalam bidang android development yang mungkin sudah berkali kali tulisannya menginspirasi beberapa developer di luar sana terutama saya pribadi.&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://cyrilmottier.com/&quot;&gt;Cyril Mottier&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://commonsware.com/&quot;&gt;Mark Murphy - commonsware&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/JakeWharton&quot;&gt;Jake Wharton&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;http://www.androidhive.info/&quot;&gt;Ravi Tamada&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;http://www.vogella.com/tutorials/android.html&quot;&gt;Vogella&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Waduh masih banyak yang belum saya sebutkan, yang jelas terimakasih untuk semua developer yang meluangkan waktu nya untuk menulis dan menyediakan resources yang begitu banyak dan berharga bagi pemula dan jikalau yang saya paparkan diatas kurang, anda bisa mengunjungi sebuah topik pembahasan di Quora mengenai topik &lt;a href=&quot;https://www.quora.com/What-are-the-good-online-tutorials-and-books-to-learn-Android-development&quot;&gt;The Good Online Tutorial of Android Development&lt;/a&gt; dan disini saya ingatkan lebih banyaklah koding daripada hanya menyimpan banyak referensi pemprograman tapi tak satupun yang di jalankan.&lt;/p&gt;

&lt;p&gt;Mungkin sekian, kick starter -nya. Alhamdulillah, semoga tulisan sederhana ini bisa bermanfaat bagi mereka yang memulai belajar pemprograman android, setidaknya ini adalah jejak kecil untuk memulai langkah yang besar.&lt;/p&gt;

&lt;p&gt;./creatorb&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Source Code&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/CreatorB/HelloAndroidWorld&quot;&gt;Check Project&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/CreatorB/HelloAndroidWorld/archive/master.zip&quot;&gt;Download&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</description>
        <pubDate>Sun, 02 Apr 2017 21:03:14 +0000</pubDate>
        <link>https://creatorbe.github.io/programming/android/2017/04/02/hello-world-android-creatorbe.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/programming/android/2017/04/02/hello-world-android-creatorbe.html</guid>
        
        
        <category>programming</category>
        
        <category>android</category>
        
      </item>
    
      <item>
        <title>Java dan XML dibalik layar</title>
        <description>&lt;p&gt;Tidak sedalam menyelam dalam kisah romeo dan juliet tapi secerca romansa java dan xml. Jika cinta bermakna &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;TextView&lt;/code&gt; maka disana kacamata relasi diantara keduanya. Statement mengenai &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;TextView&lt;/code&gt; dalam xml bermakna view dan pada java adalah class, tidak juga salah tetapi jangan lupa kembali lagi ke awal dimana &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;View&lt;/code&gt; sendiri adalah class java dan tentu &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;TextView&lt;/code&gt; adalah subclass dari &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;View&lt;/code&gt;. Bagaimana xml memahami java yaitu dengan memposisikan diri menyederhananakn kompleksitas java dengan menerjemahkan sejumlah &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;View&lt;/code&gt; sebagai obyek yang mana hasil akhirnya adalah antar muka (UI) yang kita kenal selama ini. Sehebat keduanya memahami kompleksitas diri, sebagaimana itu teori dan sekarang mari melihat bagaimana itu terjadi.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;activity_main.xml&lt;/strong&gt;&lt;/p&gt;

&lt;div class=&quot;language-xml highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;RelativeLayout&lt;/span&gt; 
    &lt;span class=&quot;na&quot;&gt;xmlns:android=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;http://schemas.android.com/apk/res/android&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;xmlns:tools=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;http://schemas.android.com/tools&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;match_parent&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;match_parent&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingLeft=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_horizontal_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingRight=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_horizontal_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingTop=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_vertical_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingBottom=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_vertical_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;tools:context=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;.MainActivity&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;nt&quot;&gt;&amp;lt;TextView&lt;/span&gt; 
        &lt;span class=&quot;na&quot;&gt;android:text=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Cinta&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@+id/textview&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;

&lt;span class=&quot;nt&quot;&gt;&amp;lt;/RelativeLayout&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;MainActivity.java&lt;/strong&gt;&lt;/p&gt;

&lt;div class=&quot;language-java highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;MainActivity&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Activity&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
    
        &lt;span class=&quot;nd&quot;&gt;@Override&lt;/span&gt;
        &lt;span class=&quot;kd&quot;&gt;protected&lt;/span&gt; &lt;span class=&quot;kt&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;onCreate&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Bundle&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;savedInstanceState&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;kd&quot;&gt;super&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;onCreate&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;savedInstanceState&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
            &lt;span class=&quot;n&quot;&gt;setContentView&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;R&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;activity_main&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;

              &lt;span class=&quot;nc&quot;&gt;TextView&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;perasaan&lt;/span&gt;  &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;TextView&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;findViewById&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;R&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;textview&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
                                            
            &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Seperti itulah umumnya implementasi mengungkapkan nilai (Cinta :p) dari sebuah variabel (Perasaan ^^) dan berikut jika java sebagai persepsi.&lt;/p&gt;

&lt;div class=&quot;language-java highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;public&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;MainActivity&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Activity&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
    
        &lt;span class=&quot;nd&quot;&gt;@Override&lt;/span&gt;
            &lt;span class=&quot;kd&quot;&gt;protected&lt;/span&gt; &lt;span class=&quot;kt&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;onCreate&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Bundle&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;savedInstanceState&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;kd&quot;&gt;super&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;onCreate&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;savedInstanceState&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
                &lt;span class=&quot;n&quot;&gt;setContentView&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;R&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;activity_main&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;

                   &lt;span class=&quot;nc&quot;&gt;View&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;relativeLayout&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;findViewById&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;R&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;rootlayout&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
                   &lt;span class=&quot;nc&quot;&gt;TextView&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;perasaan&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;TextView&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
                   &lt;span class=&quot;n&quot;&gt;perasaan&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;setText&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Cinta&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
                   &lt;span class=&quot;n&quot;&gt;perasaan&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;setId&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;12&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;
                   &lt;span class=&quot;n&quot;&gt;setLayoutParams&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;LayoutParams&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;LayoutParams&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;WRAP_CONTENT&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;LayoutParams&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;WRAP_CONTENT&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;));&lt;/span&gt; 
                   &lt;span class=&quot;o&quot;&gt;((&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;RelativeLayout&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;relativeLayout&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;addView&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;perasaan&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;);&lt;/span&gt;
                                                                    
            &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Keren, begitu indah, tak terukir kata, seakan ingin rasanya mengatakan lihat dan baca lah, biar kode yang menjelaskannya, haha!.&lt;/p&gt;

&lt;p&gt;Memang dari permisalan yang saya paparkan diatas satu sama lain bisa saling menggantikan, memang kesimpulan yang tidak salah tetapi kembali lagi lihatlah kode diatas mungkin itu hanyalah sebuah rak kecil dalam sebuah rumah, bagaimana jika kita ingin membangun desa, kota, belum lagi dunia, tentu membangun UI dalam java dengan sekelumit kontainer,kontrol,method dan belum lagi yang lainnya adalah tindakan yang benar benar ceroboh dan rawan kesalahan.&lt;/p&gt;

&lt;p&gt;Disini xml sangat mengerti java dan disana sebagian orang hendak memisahkannya, sejauh ini xml sebagai tubuh dan java adalah jiwa, dimana itu adalah wadah yang cantik dari kode java itu sendiri. Disisi lain tentu itu membuat anda bekerja lebih efisien daripada mengerjakan dengan tangan anda sendiri, tentu bukanlah seberapa nerd anda tapi di rimba mengharuskan kita menjadi seorang yang benar benar pemalas. Satu hal yang pasti selama tidak ada yang menggantikan eksistensi dan ekstensi &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;AndroidManifest.xml&lt;/code&gt; maka membersihkan xml tentu hanya sebatas mimpi akan tetapi tidak menutup kemungkinan seiring berjalannya waktu mungkin semua kisah ini akan berakhir dengan hadirnya subyek yang lebih indah dari yang kini ada, siapa yang bisa menerka. Namun setidaknya kisah ini pernah singgah menjadi satu dari bagian string dalam creatorbe links ;)&lt;/p&gt;

&lt;p&gt;./creatorb&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Rujukan&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://developer.android.com/reference/android/widget/TextView.html&quot;&gt;https://developer.android.com/reference/android/widget/TextView.html&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
        <pubDate>Sun, 02 Apr 2017 21:03:05 +0000</pubDate>
        <link>https://creatorbe.github.io/programming/android/minds/2017/04/02/java-and-xml-behind-the-scenes-creatorbe.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/programming/android/minds/2017/04/02/java-and-xml-behind-the-scenes-creatorbe.html</guid>
        
        
        <category>programming</category>
        
        <category>android</category>
        
        <category>minds</category>
        
      </item>
    
      <item>
        <title>Qoilulah Muslim Lifestyle</title>
        <description>&lt;p&gt;Qoilulah apa itu? sebenarnya ada banyak sekali ilmu baik dari alquran maupun sunnah, segala apa yang dicontohkan oleh nabi muhammad shallahu’alaihi wa sallam tapi sayang nya di zaman ini kita terlalu jauh pada pedoman islam itu sendiri, kita terlalu di sibukkan dengan mencari teori baru yang di usung ilmuan ilmuan masa kini, dimana jika kita benar benar menilik sejarah sudah tak terhitung jumlah nya kebenaran apa yang telah lama dibawa alquran terbukti di masa kini, tapi seakan kita lupa apa yang islam punya, kita lebih bangga pada penelitian daripada fakta kebenaran. Bagaimana bisa seseorang berdalih perubahan zaman, seakan alquran tidak pernah berkata apa yang telah lalu dan apa yang akan datang di masa depan. Zadanallah ilman wa hirshan (Semoga Allah manambah kita ilmu dan semangat).&lt;/p&gt;

&lt;h3 id=&quot;qoilulah&quot;&gt;Qoilulah&lt;/h3&gt;

&lt;p&gt;Makna qoilulah secara bahasa berarti tidur/istirahat di pertengahan siang. Tidur siang atau qoilulah sendiri hukumnya dianjurkan menurut mayoritas ulama mengingat rasulullah pernah bersabda,&lt;/p&gt;

&lt;p&gt;&lt;em&gt;“Hendaknya kalian tidur siang karena setan itu tidak tidur siang”&lt;/em&gt; &lt;strong&gt;(HR. Abu Nu’aim dalam Ath-Thibb, dikatakan oleh Al-Imam Al-Albani rahimahullahu dalam Ash-Shahihah : isnadnya shahih)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Khathib as Syarbini as Syafii mengatakan, Dianjurkan qoilulah bagi yang hendak melaksanakan shalat tahajud. Qoilulah adalah tidur sebelum zhuhur. Qoilulah itu seperti makan sahur bagi orang yang berpuasa. Dalam kitab Fatawa Hindiyah / mazhab Hanafi disebutkan anjuran untuk tidur siang.&lt;/p&gt;

&lt;h3 id=&quot;waktu-pelaksanaan&quot;&gt;Waktu Pelaksanaan&lt;/h3&gt;

&lt;p&gt;Ulama berselisih pendapat dalam masalah ini, para sahabat dahulu mengerjakan qoilulah setelah pelaksanaan shalat dzuhur/jumat. Hal ini pernah ditegaskan oleh Anas bin Malik dan Sahl bin Sa’ad radhiyallahu’anhuma.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Anas bin Malik radhiyallahu’anhu berkata: “Kami dahulu bersegera pergi ke shalat jum’at, kemudian kami tidur siang setelah mengerjakan shalat jum’at.”&lt;/em&gt; &lt;strong&gt;(HR. al-Bukhari, No. 905 &amp;amp; 940.)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Sahl bin Sa’ad radhiyallahu’anhu berkata: “Kami dahulu tidak tidur qoilulah dan tidak makan siang, melainkan setelah mengerjakan shalat jum’at.” Dalam riwayat lain ia berkata: “Kami dahulu mengerjakan shalat jum’at bersama Nabi shallallahu’alaihi wa sallam, kemudian baru tidur siang.”&lt;/em&gt; &lt;strong&gt;(HR. al-Bukhari, no. 939, 941, 2349, 5403, 6248, dan Muslim, no. 859.)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Sedangkan pendapat Ibnu Hajar rahimahullah berkata: “Bahwasanya sahabat mengerjakan shalat terlebih dahulu sebelum tidur siang. Hal ini menyelisihi kebiasaan mereka dalam mengerjakan shalat dzuhur ketika panas begitu menyengat. Yang mana mereka melakukan tidur siang terlebih dahulu, setelah itu baru mengerjakan shalat dzuhur. Alasannya, menunggu suhu udara hingga terasa dingin merupakan perkara yang disyariatkan.&lt;/em&gt; &lt;strong&gt;(Fathul Bari, juz 2, hal. 493)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Rasulullah shallallahu’alaihi wa sallam bersabda:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;“Apabila suhu udara terlalu panas, maka tundalah pelaksanaan shalat hingga udara terasa dingin. Karena sesungguhnya panasnya udara merupakan hembusan Jahannam.”&lt;/em&gt; &lt;strong&gt;(HR. al-Bukhari, no. 533, 534, 535, 536, 538, 539)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Khalid bin Dinar rahimahullah berkata: &lt;em&gt;“Aku pernah mendengar Anas bin Malik radhiyallahu’anhu berkata: Adalah Nabi shallallahu’alaihi wa sallam dahulu apabila udara dingin, beliau menyegerakan pelaksanaan shalat. Dan apabila udara terasa panas, beliau menunda pelaksanaan shalat hingga udara terasa dingin.”&lt;/em&gt; &lt;strong&gt;(HR. al-Bukhari, no. 906)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Dari keterangan singkat di atas, ada yang berpendapat bahwasanya di saat udara dingin Rasulullah melakukan qoilulah setelah sholat dzuhur, sedangkan ketika udara panas Rasulullah melakukan qoilulah sebelum dhuhur. Tapi insyaallah pendapat yang paling terang dan tidak samar ialah sehabis jum’at (dimana di hari lain adalah dzuhur) seperti halnya apa yang disampaikan.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;wallahu’alam&lt;/em&gt;&lt;/p&gt;

&lt;h3 id=&quot;fadhilah-keutamaan-dan-kelebihan-qoilulah&quot;&gt;Fadhilah (keutamaan dan kelebihan) Qoilulah&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Sunnah nabi muhammad&lt;/strong&gt; ini yang harusnya yang dijadikan landasan dasar untuk mengerjakannya, sunnah adalah perbuatan yang di contohkan oleh nabi muhammad shallahu’alaihi wasallam selama hidupnya, baik yang dikerjakan oleh beliau telah ditemukan hikmah dan keutamaanya ataupun masih belum ditemukan manfaat nya karena tentu ketiadaan hikmah adalah keterbatasan ilmu kita sendiri.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Merupakan kebiasaan generasi terbaik&lt;/strong&gt; Generasi sahabat (&lt;em&gt;seseorang yang mengenal dan melihat langsung Nabi Muhammad, membantu perjuangannya dan meninggal dalam keadaan Muslim&lt;/em&gt;), tabi’in (&lt;em&gt;artinya pengikut, adalah orang islam awal yang masa hidupnya setelah para sahabat. Usianya tentu saja lebih muda dari sahabat Nabi bahkan ada yang masih anak-anak atau remaja pada masa sahabat masih hidup&lt;/em&gt;), dan tabi’ut tabi’in (&lt;em&gt;pengikut tabi’in, orang islam yang hidup bersama tabi’in&lt;/em&gt;), dalam meneladani hidup mereka begitu antusias dalam mengamalkan sunnah Nabi shallallahu’alaihi wa sallam. Dan yang tidak kalah ketinggalan adalah sunnah qoilulah.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Merupakan salah satu upaya untuk menyelisihi setan&lt;/strong&gt; setelah perintah meneladani, selanjutnya adalah menyelesihi, jadikan perbedaan antara kita dengan setan, jadikan perbedaan antara kita dengan orang non muslim, tentu perbedaan yang dimaksud dalam hal kebaikan dan sesuai sunnah nabi. &lt;em&gt;“Barang siapa yang menyerupai suatu kaum, maka dia termasuk dari kaum itu.”&lt;/em&gt; &lt;strong&gt;(Shahih. Lihat: Irwa’ul Ghalil, no. 1269, 2384)&lt;/strong&gt; ya akhi banggalah  islam punya gaya hidup yang begitu mulia, tidak patut kiranya kita malah belajar gaya hidup mereka.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;hikmah-qoilulah-disadur-dari-penelitian-tidur-siang&quot;&gt;Hikmah Qoilulah (disadur dari penelitian tidur siang)&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Mengembalikan Kesiagaan&lt;/strong&gt;. Salah satu cara untuk mengobati insomnia, Ketika merasa mengantuk otomatis tidak akan bisa melakukan pekerjaan terbaik dan solusi terbaik adalah istirahat. Sebuah studi NASA menemukan bahwa 40 menit tidur siang meningkatkan kesiagaan dengan 100%. Studi-studi lain telah menemukan bahwa 20 menit tidur siang lebih efektif daripada baik 200 mg kafein. Namun penelitian lain menunjukkan bahwa pilot yang diizinkan untuk tidur siang lebih baik daripada mereka yang tidak tidur siang, mereka juga membuat kesalahan kurang selama take-off dan pendaratan. Penelitian ini menunjukkan tidur siang mengembalikan energi seperti halnya kita kembali mendapat energi saat bangun pagi.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Meningkatkan Daya Ingat&lt;/strong&gt; Sebuah penelitian tahun 2008 menemukan bahwa tidur siang bisa membantu meningkatkan daya ingat. Peningkatan ini terjadi dalam fase slow-wave sleep atau tidur gelombang pendek sebagaimana biasa terjadi saat tidur siang. Jenis memori otak yang terlibat dalam mengerjakan tugas-tugas kompleks di mana harus memperhatikan satu hal sambil mengerjakan banyak hal lain dalam memori anda. Tidur siang juga meningkatkan retensi memori, karena saat tidur, rekaman baru otak ditransfer ke neokorteks, di mana rekaman tersebut dipadatkan dan disimpan.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Meningkatkan Produktivitas&lt;/strong&gt; Tidur siang dapat melindungi otak dari pengolahan informasi yang terjadi secara berlebihan dan membantu mengkonsolidasikan informasi yang baru dipelajari. Hal ini pada akhirnya akan meningkatkan konsentrasi dan produktifitas di tempat kerja. Bahkan penelitian sebelumnya menemukan tidur siang dapat menurunkan tekanan darah. Sementara banyak orang yang menolak tidur siang karena terlalu banyak yang harus dilakukan, penelitian telah menunjukkan bahwa menempatkan lembur dalam jam tambahan tanpa istirahat secara dramatis mengurangi produktivitas Anda. Akan lebih baik untuk tidur siang dan kembali ke pekerjaan Anda dalam keadaan bugar. Hal ini ditunjukkan dalam sebuah studi di mana subyek melakukan tugas visual yang selama empat hari. Dengan setiap sesi berturut-turut, kinerja subyek pada tugas memburuk. Tapi ketika subjek diizinkan untuk mengambil tidur siang setelah sesi kedua, penurunan kinerja dihentikan. Dan setelah tidur siang, kinerja mereka benar-benar membaik di sesi ketiga dan keempat.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Menurunkan Stres dan Meningkatkan Suasana Hati&lt;/strong&gt; Penelitian menunjukkan bahwa hormon stres secara dramatis mengalami penurunan setelah tidur siang, terutama jika semalam tidurnya kurang begitu nyenyak. Sebuah penelitian di Jerman menemukan bahwa ketika sekelompok pilot tidur kurang dari 7 jam semalam sebelum bertugas, kadar kortisolnya meningkat secara signifikan dan bertahan selama 2 hari. Namun ketika berhasil tidur siang barang sebentar, kadar kortisol berkurang separuhnya. Sedangkan Neurotransmitter serotonin mengatur suasana hati kita, tidur, dan selera. Ini menghasilkan perasaan puas dan kesejahteraan. Tapi ketika tubuh kita sedang stres, tingkat yang lebih tinggi dari serotonin yang digunakan dan produksi yang lebih ditahan. Akibatnya,kita bisa menjadi cemas, mudah marah, depresi, kewalahan, dan mudah terganggu, maka tidur siang menggenangi otak anda dalam serotonin, membalikkan efek-efek dan menciptakan pandangan yang lebih positif.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Mencegah Penyakit Jantung&lt;/strong&gt; Tidur siang yang pendek bisa mengurangi risiko penyakit kardiovaskular seperti jantung dan stroke. Kesimpulan ini berdasarkan penelitian yang dilakukan oleh peneliti Yunani dan tentu masih banyak lagi manfaat tidur siang dalam bidang kesehatan.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Menghemat Uang&lt;/strong&gt; Bagaimana bisa? ketika anda ditempat kerja jam istirahat siang, daripada menghabiskan uang untuk membeli kopi,suplemen lainya, atau camilan penghilang ngantuk, lebih baik ambillah waktu untuk istirahat, jika tidak bisa berbaring setidaknya posisikan diri di posisi yang nyaman, duduk dan tidurlah sejenak.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h3&gt;

&lt;p&gt;Qoilulah tidur siang sejenak, waktu pelaksanaanya terdapat selisih paham diantara ulama, akan tetapi insyaallah pendapat yang paling rajih (kuat) ialah sehabis dzuhur (disini penulis melaksanakannya terkadang sebelum dan terkadang sesudah dzuhur). Terkait lama / periode waktunya menurut beberapa penelitian yang dilakukan mencapai hasil maksimal ketika menempuh waktu sekitar 15 menit hingga 30 menitan (kurang dari 1 jam) dimana manfaat nya sudah tidak diragukan lagi untuk menjaga kesehatan dan meningkatkaan produktivitas.&lt;/p&gt;

&lt;p&gt;Demikian, mungkin masih banyak manfaat baik yang tidak tercantumkan pada penjelasan diatas baik mungkin karena saya sebagai penulis terlewati dalam merangkum ataupun dari segi penelitian masih belum mendapatkan informasi. Subhanallah ya akhi, tidur sianglah… orang orang disana sibuk meneliti perihal yang bisa jadi kita anggap hal sepeleh, tapi bagi mereka adalah sesuatu terobosan yang luar biasa dan fakta nya itu telah di bawa dan di contohkan oleh nabi muhammad shallahu’alaihi wasallam sejak berabad silam. Sampai kapan kita kagum dan menunggu hasil dari penelitian, kembali dan pelajari lah alquran, as-sunnah dan bercerminlah pada nabi muhammad shallahu’alaihi wasallam sebagai sosok teladan.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;“Sesungguhnya pada diri Rasulullah ada teladan yang baik bagimu, yaitu bagi orang yang mengharap Allah dan hari akhir serta banyak berdzikir kepada Allah.”&lt;/em&gt; &lt;strong&gt;(Al-Ahzab: 21)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;./creatorb&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Rujukan&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;em&gt;&lt;a href=&quot;https://www.researchgate.net/publication/280999052_The_Concept_of_Qailulah_Midday_Napping_from_Neuroscientific_and_Islamic_Perspectives&quot;&gt;The Concept of Qailulah (Midday Napping) from Neuroscientific and Islamic Perspectives&lt;/a&gt;&lt;/em&gt; salah satu makalah tentang penelitian tidur siang.&lt;/li&gt;
  &lt;li&gt;&lt;em&gt;Take a Nap!: Change Your Life&lt;/em&gt; buku yang ditulis oleh Sara C. Mednick, Ph.D peneliti tentang tidur siang. (maaf link tidak bisa saya cantumkan karena berbayar anda bisa mendapatkannya di amazon, dll)&lt;/li&gt;
&lt;/ul&gt;
</description>
        <pubDate>Sat, 01 Apr 2017 06:45:21 +0000</pubDate>
        <link>https://creatorbe.github.io/islam/lifestyle/2017/04/01/qailulah-muslim-lifestyle-creatorbe.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/islam/lifestyle/2017/04/01/qailulah-muslim-lifestyle-creatorbe.html</guid>
        
        
        <category>islam</category>
        
        <category>lifestyle</category>
        
      </item>
    
      <item>
        <title>Begadang Menjalin Relasi dan Meraup Keuntungan Pasti</title>
        <description>&lt;h3 id=&quot;point-of-view&quot;&gt;Point of View&lt;/h3&gt;

&lt;p&gt;Mungkin langsung saja disini saya ingin menyampaikan pesan dari salah seorang sahabat, sahabatnya seseorang yang sudah lama terkenal kejujurannya, dimana dalam kesimpulan yang saya tangkap barangkali diantara pembaca / teman ada yang punya beberapa hajat/keinginan, baik yang sekedar belum punya uang ingin punya uang, yang masih nganggur ingin bekerja atau yang butuh modal untuk membuka usaha, sekalian yang masih belum ada tempat tinggal, dan yang masih belum ada calon ikhwan/akhwat untuk menikah (peluang bagi saya juga :D), atau mungkin yang butuh dana untuk ibadah haji, dan tidak juga menutup kemungkinan keinginan mulia lainnya yang tidak dapat saya tuliskan satu per satu disini, yang penting silahkan di sampaikan tapi sebelum itu pernahkan anda berpifikir adakah orang yang seperti itu? membantu untuk mencapai apa yang anda minta, mungkin 1,2,3 dan sekian kali iya, tapi bagaimana jika permintaan ke 1001, 1002, 1003 subhanallah sebagai manusia biasa sehari diminta membantu 20 - 30 kali saja terkadang jangan kan bantu, melihat yang hendak meminta datang saja sudah malas malasan menyambutnya, lalu apa?. Kembali lagi saya ingin menyampaikan bahwasanya seorang sahabat yang saya maksud tadi tidak lain adalah Abu Hurairah dan seseorang yang terkenal kejujurannya adalah Nabi muhammad shallallahu’alaihi wa sallam, dimana beliau berkata:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;“Rabb kita tabaraka wa ta’ala turun ke langit dunia setiap sepertiga malam akhir. Ia (allah) berkata: Barangsiapa yang berdoa, akan Aku kabulkan. Siapa yang meminta kepada-Ku akan Aku beri. Siapa yang memohon ampun kepada-Ku, akan Aku ampuni. Hingga terbit fajar”&lt;/em&gt;
&lt;strong&gt;(HR. Bukhari 1145, Muslim 758)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;dan diperkuat kembali oleh firman allah dalam al-quran,
&lt;em&gt;“Sesungguhnya orang-orang yang bertaqwa itu berada dalam taman-taman (syurga) dan mata air-mata air, sambil menerima segala pemberian Rabb mereka. Sesungguhnya mereka sebelum itu di dunia adalah orang-orang yang berbuat kebaikan. Di dunia mereka sedikit sekali tidur di waktu malam. Dan selalu memohonkan ampunan diwaktu pagi sebelum fajar.”&lt;/em&gt; &lt;strong&gt;(QS. Adz Dzariyat: 15-18)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Sadar! kita tidak sedang membahas sebuah teori, bermacam teori diluar sana di jual dengan harga tinggi, insyaallah ini adalah sebuah solusi dan keuntungan pasti. Janganlah bersandar pada manusia karena sejatinya manusia itu lemah, mintalah pada allah. “Mintalah pertolongan dengan sabar dan shalat” &lt;strong&gt;(QS. Al Baqarah: 45)&lt;/strong&gt;. Sudah jelas kemana arah pembicaraan kita, ya akhi paksakan diri untuk bangun malam, berdiri tegakkan sholat(tahajjud),sujud mintalah apa yang antum inginkan, buka lah dengan kalimat pengagungan kepada allah dan sholawat kepada nabi muhammad, kemudian berdoalah dan pada &lt;strong&gt;(QS. Al Baqarah: 45)&lt;/strong&gt; allah menyuruh kita untuk sabar, bisa jadi karena sifat manusia setiap meminta pertolongan ingin segera di kabulkan, janganlah meminta sesuatu dengan tergesa-gesa karena semua doa yang antum sampaikan, insyaallah pasti allah kabulkan, dan tertahannya doa bisa jadi karena dosa dosa maka perbanyaklah istighfar, bisa jadi allah tidak kabulkan doa tersebut karena penyebab kita kufur, bisa jadi allah langsung ijabahkan karena doa tersebut penyebab kita banyak bersyukur.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;“Dari Abu Said bahwasanya Rasulullah shallallahu alaihi wasallam bersabda: Apabila seorang muslim berdoa dengan suatu doa yang tidak mengandung unsur dosa atau pemutusan silaturahmi melainkan Allah akan memberikan kepadanya salah satu dari tiga hal, yaitu; (1) Allah akan menyegerakan pengabulan doanya, atau (2) Allah menjadikannya sebagai simpanan baginya di akhirat, atau (3) Allah menghilangkan daripadanya keburukan yang semisalnya”.&lt;/em&gt; &lt;strong&gt;(HR. Ahmad III/18 no.11149. dan hadits ini derajatnya Hasan Shohih sebagaimana dinyatakan oleh syaikh Al-Albani di dalam Shohih At-Targhib wa At-Tarhib II/128 no.1633).&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Nanti di Hari Kiamat, akan datang orang-orang di Padang Mahsyar yang menerima pahala bergunung-gunung, tapi mereka tidak tau dari mana asalnya pahala ini. Karena umumnya untuk ibadah-ibadah yang lain mereka sudah tau, ini dari Shalat Saya, Dari Puasa saya, dll. Tapi khusus untuk pahal yang bergunung-gunung ini mereka tidak tau, dan merekapun bertanya kepada para malaikat: “Pahala apa ini? Pahala dari ibadah apa ini? sehingga pahalanya begitu banyak”. Dan kata malaikat: “Ini adalah pahala atas doa-doa kalian panjatkan di dunia, yang belum kalian dapatkan jawabannya di dunia.” Dalam Riwayat ini dijelaskan pula, bahwa semua orang-orang itu berharap semua doa-doa yang mereka panjatkan itu tidak diterima di dunia namun diterima di akhirat. Dan tidak ada yang sia-sia, merekapun mendapatkannya. Sungguh mereka &lt;strong&gt;Meraup Keuntungan Pasti&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Begitu banyak sekali manfaat dari shalat malam dan saya sangat menganjurkan sebagai rujukan anda bisa mendownload ebook tentang fadilah dan manfaat manfaat shalat tahajjud, ya akhi jangan malas minimal jikalau apa yang saya paparkan masih kurang memotivasi minimal browsing dan baca baca di website lain perihal shalat tahajjud dan fadilahnya, karena memang apa yang saya tulis tak lebih dari setetes percikan kecil dari samudra ilmu yang luas, datangi lah ilmu itu sendiri dan cari, semoga allah mudahkan antum dan allah beri petunjuk antum dengan membawakan teman teman amal shalih, sunnah lainnya dan semoga allah lancarkan untuk mengamalkannya.&lt;/p&gt;

&lt;p&gt;Dan bagi mereka yang udzur, semisal ketiduran, sakit, atau terjadi sesuatu sehingga melalaikan sholat malamnya, maka boleh mengqodho’nya (mengganti) di siang hari sebelum dzuhur, seperti apa yang di nukilkan oleh &lt;em&gt;Umar bin khattab, bahwasanya Rasulullah shallahu’alaihi wa sallam bersabda : “Barangsiapa yang tertidur dari penjagaannya atau dari yang lainnya, lalu ia membaca apa yang biasa ia baca di shalat malam antara shalat subuh dan shalat dzuhur, maka ia dicatat seperti membacanya di malam hari”&lt;/em&gt; &lt;strong&gt;HR. Muslim no. 747&lt;/strong&gt;&lt;/p&gt;

&lt;h3 id=&quot;improvements-habit&quot;&gt;Improvements Habit&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;“Demi masa (waktu). Sesungguhnya manusia itu benar-benar dalam kerugian, Kecuali orang-orang yang beriman dan mengerjakan amal saleh dan nasehat menasehati supaya mentaati kebenaran dan nasehat menasehati supaya menetapi kesabaran”.&lt;/em&gt; &lt;strong&gt;(QS. Al-Ashr:1-3)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Disini saya hanya akan mengulas poin penting dan tips-nya dimana hal tersebut jarang di bahas di blog lain, pertama jangan jadikan sholat malam alasan untuk malas malasan sholat subuh atau bahkan malah kelalaian naudzubillah, karena kembali pada hukum asalnya sholat malam sunnah dan sholat subuh ya wajib, kalau malah terbengkalai sholat subuhnya ya gimana. Caranya adalah kembali pada manajemen waktu (anda bisa mencari rujukan untuk meneladani manajemen waktu ala nabi muhammad karena beliau sebaik baik teladan), tidur lebih awal usahakan habis sholat isya tidur kisaran jam 20.00, niatkan karena allah untuk bangun malam insyaallah akan terjaga tengah malam dengan sendirinya, tinggal proses selanjutnya ngikut bisikan setan untuk lanjut terlelap atau tepis, bangun paksakan diri untuk bangkit dari tempat tidur. Jam 20.00 harus tidur? iya! ga bisa diundur? acara tv lagi bagus2 nya, temen nongkrong lagi rame ramenya, inilah… itulah, ya akhi lembek sekali, mana bisa jika terus berleha leha. Sebaik baik tontonan yang bisa membawa diri pada kebaikan paling tidak adalah minimal pesan yang bisa kita ambil bukan hanya nonton untuk menghabiskan waktu itu sendiri, temen nongkrong lagi rame justru malah bagus kita punya komunitas tinggal ngatur pola habit nya arah kemana, apa salahnya tidur dulu bangun tengah malam tunaikan hak allah, selesai nongkrong dan kumpul lagi syukur2 kumpul bareng saling tukar pikiran, bahas ilmu, dan hal bermanfaat lainnya, hadaanallah (semoga allah memberikan kita petunjuk/hidayah), duh susah kayanya… subhanallah belum dicoba sudah susah, bagaimana caranya ya akhi, coba dulu kerjakan baru simpulkan, memang susah di permulaan tapi insyaallah jika ada niatan allah mudahkan. Minimal walaupun kita tidak bisa merubah lingkungan setidaknya kita sendiri yang terlebih dahulu memulai dan terus berubah menjadi pribadi yang lebih baik.&lt;/p&gt;

&lt;p&gt;Terkait kalkulasi waktu sendiri, mari secara rasional kita renungkan dan pikirkan. Katakanlah kita habiskan waktu untuk begadang semisal jam 03.00 pagi kita tidur, sudah pasti subuh nya terlalaikan. Ok sekarang katakanlah kita begadang full sampai pagi sehabis subuh kita tidur, sudah pasti juga kita tidak bisa mengontrol akan bangun jam berapa, terlewat waktu pagi dan setengah siang nya dimana waktu waktu tersebut justru waktu produktif. Ok sekarang tarohlah kita pasang alarm akan bangun jam 08.00 dari jam 05.00 kita tidur ke jam 08.00 setidaknya menghabiskan waktu 3 jam an, itu pun kalo kita bisa bangun jam 08.00 dan itu pun apakah kita bisa meyakini apakah tubuh dalam keadaan fit dan bugar untuk menjalani hari. Baik sekarang bandingkan jika kita membuang waktu malam kita untuk tidur lebih awal, dari jam 20.00 kita pasang alarm jam 00.00 untuk bangun malam, kita sholat tunaikan hak allah dan selanjutnya bisa melakukan aktifitas lainya, masyaallah jam 20.00 ke jam 00.00 disini kita habiskan waktu 4 jam untuk tidur, lebih banyak dan insyaallah lebih berkualitas dari pada anda harus menukar 4 jam tersebut dengan 3 jam di waktu pagi anda. Dari jam tersebut anda juga bisa begadang sampai siang pun, insyaallah bisa tahan. Ada baiknya anda mengerjakan sunnah rosul yang lain bernama qoilulah yang bermakna istirahat/tidur siang sejenak (sebagai tambahan anda bisa membaca pembahasan tentang &lt;a href=&quot;https://creatorbe.github.io/islam/lifestyle/2017/04/01/qailulah-muslim-lifestyle-creatorbe.html&quot;&gt;Qoilulah Muslim Lifestyle&lt;/a&gt;), anda bisa istirahat/tidur sejenak sekitar 15 menitan di siang hari, itupun kalau memang anda tidak mau begadang, ya tetap tidur sehabis isya, cuman waktu malamnya setelah sholat malam bisa di pakai untuk kembali beristirahat. Dan tentunya tiap permulaan itu tidak mudah, coba lakukan, paksakan dan terapkan, insyaallah apa yang diniatkan karena allah, allah mudahkan dan kekalkan (istiqomahkan).&lt;/p&gt;

&lt;p&gt;Sebenarnya banyak sekali paparan hadits maupun ayat alquran yang qadarullah tidak bisa saya cantumkan semuanya disini dan saya yakin akan lebih banyak lagi pelajaran dan berbagai macam solusi dari permasalahan pelik bagaimana menjalani hidup ini apabila kita mau mentafakkuri, jika saja kita mau membuka sedikit saja usaha untuk mencari jawaban, sebagaimana sifat jawaban, ada yang benar, ada yang kemungkinan salah dan ada yang benar namun mendekatkan pada kesalahan. Tentu jawaban yang benar adalah jawaban dari dzat yang dimana persoalan itu kembali, bukan pada tempat kebanyakan orang orang meminta solusi dalam teori, sebagian mereka hanya bisa membahasakan tapi tidak melakukan, sebagian mereka yang tidak beriman malah sukses karena memang allah mudahkan rahmat allah meliputi semua makhluk, sudah pasti dengan ilmu dunia bisa dicapai, dengan ilmu pula akhirat di gapai, dan dengan ilmu allah jadikan pembeda. Kembali lah pada sumber yang terpercaya, alquran dan assunnah.&lt;/p&gt;

&lt;p&gt;./creatorb&lt;/p&gt;
</description>
        <pubDate>Fri, 31 Mar 2017 06:45:21 +0000</pubDate>
        <link>https://creatorbe.github.io/islam/2017/03/31/begadang-menjalin-relasi-meraup-keuntungan-pasti-creatorbe.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/islam/2017/03/31/begadang-menjalin-relasi-meraup-keuntungan-pasti-creatorbe.html</guid>
        
        
        <category>islam</category>
        
      </item>
    
      <item>
        <title>Gradle itu apa sih?</title>
        <description>&lt;p&gt;Seringkali, ketika mencari definisi dasar suatu konsep pemrograman, kita hanya menemukan pembahasan teknis tentang &lt;em&gt;cara menggunakannya&lt;/em&gt; dan bukan &lt;em&gt;apa esensinya&lt;/em&gt;. Untuk itu, mari kita definisikan &lt;strong&gt;Gradle&lt;/strong&gt; dengan kalimat yang sederhana:&lt;/p&gt;

&lt;p&gt;Merujuk pada wikipedia &lt;a href=&quot;https://en.wikipedia.org/wiki/Gradle&quot;&gt;https://en.wikipedia.org/wiki/Gradle&lt;/a&gt; bisa ditarik kesimpulan gradle itu automation build system, apa itu? bisa dikatakan sebagai tool untuk mengotomatisasi pembangunan proyek secara tersistem seperti halnya mengkompilasi source code yang kita buat menjadi kode biner dan memaketkan dalam paket biner, menjalankan beberapa test dan unit unit yang berkaitan dengan keperluan ekosistem development secara otomatis. Ya ringkasnya gradle adalah &lt;em&gt;tool&lt;/em&gt; (perkakas) yang bertugas mengotomatisasi semua langkah yang diperlukan untuk membangun dan mengemas sebuah proyek.&lt;/p&gt;

&lt;p&gt;Tugas-tugas yang diotomatisasi oleh Gradle meliputi:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;Kompilasi:&lt;/strong&gt; Mengubah &lt;em&gt;source code&lt;/em&gt; (kode sumber) dari bahasa tingkat tinggi (seperti Java atau Kotlin) menjadi kode biner.&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Pengemasan:&lt;/strong&gt; Menggabungkan semua kode yang telah dikompilasi, &lt;em&gt;resource&lt;/em&gt; (sumber daya), dan aset menjadi satu paket biner akhir (misalnya, file &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.jar&lt;/code&gt;, &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.war&lt;/code&gt;, atau &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.apk&lt;/code&gt;).&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Manajemen Dependensi:&lt;/strong&gt; Mengunduh, mengkonfigurasi, dan menyertakan pustaka eksternal yang dibutuhkan oleh proyek.&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Pengujian:&lt;/strong&gt; Menjalankan tes otomatis (unit test, instrumented test) pada kode.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Gradle bukanlah satu-satunya &lt;em&gt;build system&lt;/em&gt;; ia memiliki pendahulu seperti &lt;strong&gt;Ant&lt;/strong&gt; dan &lt;strong&gt;Maven&lt;/strong&gt; di ekosistem Java, atau &lt;strong&gt;Make&lt;/strong&gt; di lingkungan Linux. Keunggulan Gradle adalah kemampuannya yang &lt;strong&gt;fleksibel&lt;/strong&gt; dan penggunaan bahasa &lt;strong&gt;Groovy&lt;/strong&gt; atau &lt;strong&gt;Kotlin DSL&lt;/strong&gt; (Domain Specific Language) untuk konfigurasi, membuatnya lebih &lt;em&gt;powerful&lt;/em&gt; daripada XML statis.&lt;/p&gt;

&lt;p&gt;Jika kita berbicara secara meluas dalam pengembangan android sendiri, taroh lah kita kembali pada era eclipse dimana disana kita juga bisa melihat bagaimana proses pembangunan android bekerja tapi tidak semudah itu dikarenakan kita terbebani dengan dx,aapt,dan beberapa otomatisasi lain yang bersifat low level format yang diolah sistem eclipse sendiri dan segala proses terbungkus rapi berjalan dibelakangnya. Dalam proses pembangunan aplikasi android sendiri dimana melibatkan file core xml dan class .java yang kemudian dikompliasi sehingga menjadi keluaran file apk untuk diinstall dari sedemikian proses tersebut lah yang dinamakan build system sebagaimana tugas gradle bekerja. Jika anda ingin melihat lebih dekat bagaimana itu terjadi anda bisa merujuk pada link berikut &lt;a href=&quot;https://developer.android.com/studio/build/building-cmdline.html&quot;&gt;https://developer.android.com/studio/build/building-cmdline.html&lt;/a&gt; dan &lt;a href=&quot;https://docs.gradle.org/current/userguide/tutorial_gradle_command_line.html&quot;&gt;https://docs.gradle.org/current/userguide/tutorial_gradle_command_line.html&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Mengapa beralih pada gradle? banyak sekali yang dapat kita lakukan dengan gradle salah satunya meminimalisir konfigurasi keterkaitan proyek android dengan modul modul lainnya karena mengacu pada satu konfigurasi default yang mudah di kustomisasi, depensi kini dapat berupa banyak bentuk baik modul,arr ataupun jar dalam sistem lokal maupun remote server, otomatisasi test dalam direktori proyek pada saat proses build (pembangunan), menjadikan gradle membuat signed apk sekaligus beberapa output dalam satu modul yang sama biasanya berguna untuk pembuatan aplikasi versi daerah tertentu atau device tertentu.&lt;/p&gt;

&lt;h3 id=&quot;melihat-ekosistem-gradle-lebih-dekat&quot;&gt;Melihat ekosistem Gradle lebih dekat&lt;/h3&gt;
&lt;p&gt;&lt;br /&gt;
&lt;img src=&quot;https://c1.staticflickr.com/3/2810/32919994483_3ff48ff590.jpg&quot; alt=&quot;clear-explain-gradle-android-creatorbe&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Terdapat beberapa file yang bisa kita konfigurasikan di sana walaupun pada dasarnya tidak banyak yang akan kita sentuh pada saat development android, sebagian besar hanya lebih pada module app tempat kita memasang depensi yang kita butuh kan pada proyek android atau module project untuk konfigurasi lebih global mengenai remote server dari mana depensi berasal, tapi ada bagusnya kita memahami secara kesuluruhan fungsionalitasnya. &lt;strong&gt;gradle-wrapper.properties&lt;/strong&gt; file ini memudahkan orang lain untuk membangun proyek, dimana berisi konfigurasi default dari gradle semisal versi gradle, url, path distribusi, dll terkait proyek yang sedang dibangun intinya file ini memastikan bahwa setiap orang yang mengunduh proyek Anda akan menggunakan &lt;strong&gt;versi Gradle yang sama&lt;/strong&gt;, yang sangat penting untuk konsistensi &lt;em&gt;build&lt;/em&gt;.&lt;/p&gt;

&lt;div class=&quot;language-gradle highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;distributionBase&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;GRADLE_USER_HOME&lt;/span&gt;
 
&lt;span class=&quot;c1&quot;&gt;//Determines whether the unpacked wrapper distribution should be stored in the project, or in the Gradle user home directory.//&lt;/span&gt;
 
&lt;span class=&quot;n&quot;&gt;distributionPath&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;wrapper&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;dists&lt;/span&gt;
 
&lt;span class=&quot;c1&quot;&gt;//The path where the Gradle distributions required by the wrapper are unzipped.//&lt;/span&gt;
 
&lt;span class=&quot;n&quot;&gt;zipStoreBase&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;GRADLE_USER_HOME&lt;/span&gt;
 
&lt;span class=&quot;n&quot;&gt;zipStorePath&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;wrapper&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;dists&lt;/span&gt;
 
&lt;span class=&quot;n&quot;&gt;distributionUrl&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;https&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;c1&quot;&gt;//services.gradle.org/distributions/gradle-2.2.1-all.zip&lt;/span&gt;
 
&lt;span class=&quot;c1&quot;&gt;//The URL where the correct version of Gradle should be downloaded from.//&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;settings.gradle&lt;/strong&gt; berisi referensi terhadap semua modul apa saja yang terkait pada proyek android, karena dalam contoh screenshot diatas hanya ada modul app, maka tampilannya sesederhana berikut.&lt;/p&gt;

&lt;div class=&quot;language-gradle highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;include&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&apos;:app&apos;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;local.properties&lt;/strong&gt; berisi konfigurasi alamat path sdk android / lokasi sdk android yang sedang digunakan dalam project tersebut.&lt;/p&gt;

&lt;div class=&quot;language-gradle highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;n&quot;&gt;sdk&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;dir&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;/Users/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;creatorbe&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;/Library/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;Android&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;sdk&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;build.gradle (Project Level)
Mengatur konfigurasi global seperti repository mana yang digunakan untuk mengambil dependensi (misalnya Google Maven atau Maven Central) dan versi plugin Gradle yang digunakan.&lt;/p&gt;

&lt;p&gt;build.gradle (Module Level)
Ini adalah file yang paling sering diubah. Di sinilah Anda mendeklarasikan:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;Application ID.&lt;/li&gt;
  &lt;li&gt;Versi SDK target dan minimum.&lt;/li&gt;
  &lt;li&gt;Dependensi (pustaka) yang digunakan oleh modul tersebut.&lt;/li&gt;
  &lt;li&gt;Konfigurasi build flavor (varian aplikasi).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Memahami Gradle berarti memahami otomatisasi dan kontrol penuh atas proses pembangunan suatu proyek.&lt;/p&gt;

&lt;p&gt;Yap mungkin itu dulu, insyaallah beberapa poin poin penting telah saya sampaikan untuk lebih mengenal dan memahami apa itu gradle sudah tercapai, kini anda bisa bergabung dalam topik pembahasan gradle di forum forum untuk mengetahui lebih banyak lagi mengenai gradle. Berikut saya sertakan link rujukan untuk mengetahui pembahasan struktur gradle lebih rinci lagi di &lt;a href=&quot;https://code.tutsplus.com/tutorials/the-ins-and-outs-of-gradle--cms-22978&quot;&gt;https://code.tutsplus.com/tutorials/the-ins-and-outs-of-gradle–cms-22978&lt;/a&gt; dan bisa juga mengunjungi pembahasannya di site resmi android developer berikut &lt;a href=&quot;https://developer.android.com/studio/build/index.html&quot;&gt;https://developer.android.com/studio/build/index.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Semoga tulisan ini bermanfaat, amin.&lt;/p&gt;

&lt;p&gt;./creatorb&lt;/p&gt;
</description>
        <pubDate>Thu, 30 Mar 2017 06:16:23 +0000</pubDate>
        <link>https://creatorbe.github.io/programming/android/2017/03/30/apa-sih-pengertian-gradle-creatorbe.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/programming/android/2017/03/30/apa-sih-pengertian-gradle-creatorbe.html</guid>
        
        
        <category>programming</category>
        
        <category>android</category>
        
      </item>
    
      <item>
        <title>Memahami Struktur Proyek Android Studio</title>
        <description>&lt;p&gt;Ketika membuat program/proyek baru maka kita akan disuguhkan dengan beberapa folder yang terkadang sebagai pemula bisa saja kaget dengan banyak nya folder folder yang bernama namun tak dikenal tersebut. Berikut mari kita berkenalan dengan beberapa folder yang terdapat pada unit proyek android studio. Salah satunya modul, modul memungkinkan kita untuk membagi proyek dalam beberapa unit, bisa memakai satu atau lebih modul sebagai depensi, library, dimana setiap modul bisa di buat, di debug, dan di uji seperti halnya proyek/program android pada umumnya. Langkah dalam pembuatan modul &lt;strong&gt;File - New - New Module&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Beberapa modul dalam android &lt;strong&gt;android app module&lt;/strong&gt;, dimana isinya termasuk dari tipe tipe modul dasar pembangun android seperti halnya phone, tablet, android wear, android tv, glass, dll.
&lt;strong&gt;Modul Library&lt;/strong&gt; terdiri dari modul yang sudah terkompilasi sebelumnya sehingga bisa digunakan kembali sebagai depensi pendukung / depensi tambahan yang bisa di gunakan pada proyek android, kita bisa membuatnya di perintah yang sama seperti langkah pembuatan modul sebelumnya. Modul library sendiri ada dua, &lt;strong&gt;Android Library&lt;/strong&gt; tipe ini support di semua proyek android, strukturnya tidak jauh beda pada modul/folder proyek android pada umumnya, namun hasil akhirnya menjadi file bernama AAR (Android Archive) dimana kita bisa menggunakannya sebagai library pada proyek android. &lt;strong&gt;Java Library&lt;/strong&gt; library umum, java library berektensi JAR (Java Archive) di mana kode sudah di paketkan dalam struktur kode sumber java sehingga bisa di tambahkan pada proyek android atau bisa juga pada proyek java lainnya.
&lt;strong&gt;Modul Google Cloud&lt;/strong&gt; modul ini yang sering di pakai, dimana setiap orang kebanyakan menyatakan modul sebagai sub proyek dan gradle sendiri juga bisa dikatakan modul dalam bentuk proyek. Modul google cloud menyediakan kontainer untuk kode backend, menambahkan kode dan depensi yg diperlukan untuk backend java app engine yang menggunakan http biasa, cloud endpoints, GCM untuk menghubungkan ke aplikasi yang dibuat dan juga disediakan layanan cloud jika memang proyek yang dibangun membutuhkannya. Bisa mengunjungi link berikut untuk perihal detail google cloud &lt;a href=&quot;https://cloud.google.com/tools/android-studio/app_engine/add_module&quot;&gt;https://cloud.google.com/tools/android-studio/app_engine/add_module&lt;/a&gt;&lt;/p&gt;

&lt;h3 id=&quot;file-proyek-android-dalam-bentuk-sederhana&quot;&gt;File proyek Android dalam bentuk sederhana&lt;/h3&gt;

&lt;p&gt;&lt;img src=&quot;https://c1.staticflickr.com/3/2905/33598642851_2ff3a23a70.jpg&quot; alt=&quot;Tampilan proyek android view&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Nah seperti screenshot diatas, tampilan hierarki proyek android yang biasanya kita gunakan untuk koding, tampilan tersebut hanya untuk memudahkan dalam navigasi ke beberapa modul yang kebanyakan dibutuhkan dalam proses development. Pada dasarnya meringkas kesuluruhan file yang nantinya sering di lakukan perubahan dalam development, seperti halnya menampilkan gradle script teratas dengan pemisahan dalam tampilan, modules app agar memudahkan pengeditan modul depensi dan library tambahan dari aplikasi yang dibuat, atau module gradle project dari skala kode sumber proyek di mana depensi di dapatkan/berasal. Disisi lain juga beberapa resource gambar,icon, dll terlihat dalam satu file saja walaupun sebenarnya terdapat banyak file dalam ukuran berbeda untuk menentukan ukuran yang sesuai pada standart platform.&lt;/p&gt;

&lt;p&gt;Secara garis besar, tampilan dalam mode android tersebut dipisahkan menjadi &lt;strong&gt;manifest&lt;/strong&gt; berisi konfigurasi global dari aplikasi android, &lt;strong&gt;java&lt;/strong&gt; berisi file kontroler, java yang dipisahkan berdasarkan nama paket dan terakhir &lt;strong&gt;res&lt;/strong&gt; dimana sebagai resources, view, sumber daya dari semua komponen layout berasal, untuk lebih detail mengenai pembahasan ini bisa ke topik berikut &lt;a href=&quot;https://developer.android.com/guide/topics/resources/providing-resources.html&quot;&gt;https://developer.android.com/guide/topics/resources/providing-resources.html&lt;/a&gt;&lt;/p&gt;

&lt;h3 id=&quot;file-proyek-android-dalam-hierarki-sebenarnya&quot;&gt;File proyek Android dalam hierarki sebenarnya&lt;/h3&gt;

&lt;p&gt;&lt;img src=&quot;https://c1.staticflickr.com/3/2903/33727535075_e7c008b47d.jpg&quot; alt=&quot;Tampilan proyek project view&quot; /&gt;&lt;/p&gt;

&lt;p&gt;nama-module/
build/
Berisi file output/result/keluaran dari beberapa kompilasi project yang dilakukan saat development.&lt;/p&gt;

&lt;p&gt;libs/
berisi library proyek&lt;/p&gt;

&lt;p&gt;src/
Berisi semua file sumber daya dan kode untuk modul, termasuk kode java dan semua file resources.&lt;/p&gt;

&lt;p&gt;androidTest/
Berisi kode untuk pengujian instrumentasi yang dijalankan pada perangkat Android. Untuk informasi selengkapnya, anda bisa merujuk di link berikut &lt;a href=&quot;https://developer.android.com/studio/test/index.html&quot;&gt;https://developer.android.com/studio/test/index.html&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;main/
Berisi file sourceset “main”: sumber daya dan kode Android yang digunakan bersama oleh semua varian pembangunan baik dalam release atau versi debug (file untuk varian pembangunan lainnya berada dalam direktori sama, semisal src/debug/ untuk tipe pembangunan versi debug).&lt;/p&gt;

&lt;p&gt;AndroidManifest.xml
Konfigurasi global, menjelaskan sifat,tipe aplikasi dan masing-masing komponennya,activity,resources,nama aplikasi dll.&lt;/p&gt;

&lt;p&gt;java/
Berisi kode Java yang notabene sebagai kontroler dalam struktur project.&lt;/p&gt;

&lt;p&gt;jni/
Berisi kode asli yang menggunakan Java Native Interface (JNI).&lt;/p&gt;

&lt;p&gt;gen/
generated file, Berisi file Java yang dihasilkan oleh Android Studio, misalnya file R.java Anda dan antarmuka yang dibuat dari file AIDL, biasanya terdiri dari susunan resource id yang sudah terkompilasi secara otomatis.&lt;/p&gt;

&lt;p&gt;res/
Berisi sumber daya aplikasi tempat dimana mengatur tampilan dan layouting, dan folder lainnya berisi file resource pendukung gambar, file layout, dan string UI, dll.&lt;/p&gt;

&lt;p&gt;assets/
Berisi file yang harus dikompilasi menjadi file .apk apa adanya tanpa kompilasi seperti modul modul sebelumnya. Anda bisa menyusuri direktori ini dengan cara yang sama seperti pada sistem file umumnya dengan menggunakan URI dan membaca file sebagai aliran byte dengan menggunakan AssetManager. Lokasi yang bagus untuk data game dan tekstur.&lt;/p&gt;

&lt;p&gt;test/
Berisi kode untuk pengujian lokal yang dijalankan pada JVM host Anda.&lt;/p&gt;

&lt;p&gt;build.gradle (modul)
build.gradle (proyek)
terkait 2 build gradle tersebut sudah saya jelaskan di tampilan default android diatas dimana pada dasarnya terdapat satu file hanya saja di tampilkan lebih untuk memudahkan navigasi antara pemasangan depensi atau pemasangan kode proyek sumber depensi.&lt;/p&gt;

&lt;p&gt;Secara garis besar modul dan lingkup ruang kerja yang akan di gunakan dalam proses pengembangan proyek tidak lebih dari yang saya paparkan diatas, semoga penjelasan yang saya paparkan bisa lebih di pahami dan dimengerti mengenai fungsionalitas masing masing modul dalam proyek android itu sendiri, sehingga tidak perlu melakukan kesalahan edit file atau bingung hendak mengedit file yang mana. &lt;strong&gt;manifest&lt;/strong&gt; tempat dimana kita mendeklarasikan semua aktivitas yang akan kita jalankan pada aplikasi android nantinya, disana juga terdapat beberapa opsi item, string and value untuk menentukan / mengkonfigurasi pengaturan global dalam aplikasi android. Untuk file kontroler lebih pada file yang berektensi .java yang terdapat pada folder sub &lt;strong&gt;java/&lt;/strong&gt; di direktori src/ sedangkan untuk tampilan penyokong UI sendiri berdiri pada extensi .xml yang terdapat pada folder &lt;strong&gt;res/layout&lt;/strong&gt; dimana semua file/komponen pendukung lainnya juga bisa dimanfaatkan untuk memenuhi sumber daya semisal icon di folder mipmap/ gambar di folder drawable/ dan source string,integer,dll bisa di dapatkan dan diletakkan pada folder values/ .&lt;/p&gt;

&lt;p&gt;./creatorb&lt;/p&gt;
</description>
        <pubDate>Thu, 30 Mar 2017 06:00:35 +0000</pubDate>
        <link>https://creatorbe.github.io/programming/android/2017/03/30/memahami-struktur-project-di-android-studio-creatorbe.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/programming/android/2017/03/30/memahami-struktur-project-di-android-studio-creatorbe.html</guid>
        
        
        <category>programming</category>
        
        <category>android</category>
        
      </item>
    
      <item>
        <title>Instalasi android studio</title>
        <description>&lt;p&gt;Untuk memulai mengembangkan program berbasis android kita membutuhkan perangkat lunak / software yang akan kita gunakan untuk membangun aplikasi android itu sendiri, salah satu software yang akan kita gunakan adalah &lt;a href=&quot;https://developer.android.com/studio/intro/index.html?hl=id&quot;&gt;Android Studio&lt;/a&gt;. Disini saya tidak akan membahas secara detail cara dan tutorial instalasi karena tentunya melihat ragam device/platform os yang kita gunakan mungkin saja berbeda (linux, windows, mac, dll), maka dari itu saya akan menjelaskan secara global alat dan pendukung apa saja yang anda butuhkan untuk membuat suatu aplikasi android dan anda bisa menerapkan nya secara kesuluruhan, anda bisa mengunjungi situs resmi pengembang android untuk tahap instalasi android studio di link berikut &lt;a href=&quot;https://developer.android.com/studio/install.html?hl=id&quot;&gt;https://developer.android.com/studio/install.html?hl=id&lt;/a&gt; dan silahkan googling untuk mendapatkan tambahkan rujukan sesuai platform os yang anda gunakan dan disini anda bisa meninggalkan komentar apabila terdapat masalah dalam instalasi atau hendak berdiskusi sesuai topik yang dipaparkan.&lt;/p&gt;

&lt;h3 id=&quot;instalasi-android-studio&quot;&gt;Instalasi Android Studio&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1. &lt;a href=&quot;https://en.wikipedia.org/wiki/Java_Development_Kit&quot;&gt;Java&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Pembuatan aplikasi android notabene menggunakan bahasa pemprograman java, dimana java sendiri disediakan dalam dua paket pengembangan, JRE dan JDK. Untuk memulai pengembangan android diperlukan instalasi JDK, berikut saya sediakan link download nya di official site oracle &lt;a href=&quot;http://www.oracle.com/technetwork/java/javase/downloads/index.html&quot;&gt;http://www.oracle.com/technetwork/java/javase/downloads/index.html&lt;/a&gt; silahkan download sesuai platform os yang anda gunakan dan lakukan instalasi.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. &lt;a href=&quot;https://developer.android.com/studio/intro/index.html?hl=id&quot;&gt;Android Studio&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Software pengembangan android yang akan digunakan untuk membuat aplikasi android bisa anda download di site resminya berikut &lt;a href=&quot;https://developer.android.com/studio/index.html&quot;&gt;https://developer.android.com/studio/index.html&lt;/a&gt;&lt;/p&gt;

&lt;h3 id=&quot;instalasi-sdk&quot;&gt;Instalasi SDK&lt;/h3&gt;

&lt;p&gt;SDK akronim dari Software Development Kit, berupa folder yang berisi alat, platform dan komponen pendukung dalam pembangunan aplikasi android, dimana di dalamnya terdapat tool yang diperbarui sesuai versi os android itu sendiri. Anda bisa melakukan update dengan mengklik sdk manager pada android studio anda (lihat screenshot), kemudian akan muncul list beberapa modul sdk yang disediakan, silahkan update sesuai kebutuhan saja dikarenakan kapasitas beberapa modul berjumlah besar.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://c1.staticflickr.com/3/2870/32880748244_08c0f23da2_b.jpg&quot; alt=&quot;Screenshot sdk manager&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Anda dapat menggunakan Android SDK tools, platform-tools, SDK build-tools yang sesuai masing masing satu dan bisa di uninstall untuk yang versi lama, ada baiknya menyisakan 2 komponen dengan versi berbeda dikhawatirkan ada bug di versi terbaru anda bisa menggunakan versi sebelumnya.&lt;/p&gt;

&lt;h3 id=&quot;testing-program&quot;&gt;Testing Program&lt;/h3&gt;

&lt;p&gt;Dalam proses menjalankan aplikasi nantinya dibutuhkan media/device os android sendiri di mana aplikasi yang telah dibuat akan di jalankan untuk proses pengujian dan kelayakan. Anda bisa menggunakan hp/smartphone android anda untuk menjalankan aplikasi yang sudah dibangun di android studio sebelumnya.&lt;/p&gt;

&lt;p&gt;Menjalankan aplikasi yang dibangun menggunakan real device (menggunakan hp/smartphone seperti yang sebelumnya saya jelaskan) di perlukan beberapa tahapan untuk mengaktifkan mode usb debugging. USB debugging merupakan opsi yang disediakan untuk developer melakukan debugging aplikasi melalui fungsi USB android yang terhubung dengan pc/laptop dengan adanya mode ini dapat membangun jembatan antara perangkat Android dan PC menggunakan Android SDK (Software Development Kit), yang menjadi platform pengembangan untuk developer selama mendesain dan menguji aplikasi dan modding Android yang mereka kerjakan.&lt;/p&gt;

&lt;p&gt;Cara mengaktifkan usb debugging dengan masuk bagian menu &lt;strong&gt;Settings&lt;/strong&gt; &amp;gt; &lt;strong&gt;About Devices&lt;/strong&gt; &amp;gt; &lt;strong&gt;Build number&lt;/strong&gt; dan ketika sudah muncul versi build number lakukan tap tap pada build number sebanyak 10 kali sampai muncul pesan popup pemberitahuan bahwa mode devoloper di aktifkan dengan ditandai muncul nya icon developer option di bagian menu.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://c1.staticflickr.com/4/3933/33723929365_fa3a5d51b3_z.jpg&quot; alt=&quot;Screenshot developer mode options&quot; /&gt;&lt;/p&gt;

&lt;p&gt;kemudian klik dan dari sana anda bisa mengaktifkannya dengan menceklis di bagian debugging.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://c1.staticflickr.com/3/2950/33567809302_f14820b949_z.jpg&quot; alt=&quot;Screenshot developer usb debugging&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Setelah mode usb debugging anda aktif kini anda bisa menghubungkan kabel data smartphone dengan PC/laptop seperti hal nya transfer data biasa dan setelah terhubung akan muncul pemberitahuan bahwa mode usb debugging sedang berlangsung, dalam kondisi ini anda bisa langsung menjalankan project android yang dibangun pada smartphone yang terhubung dengan PC/laptop yang nantinya akan muncul list device yang aktif dan pilih sesuai device mana yang hendak anda lakukan debugging (sebelumnya dipastikan terlebih dahulu apabila belum terdeteksi maka bisa jadi belum terinstall driver untuk smartphone androidnya).&lt;/p&gt;

&lt;p&gt;Anda bisa mengunjungi &lt;a href=&quot;https://developer.android.com/training/basics/firstapp/running-app.html&quot;&gt;https://developer.android.com/training/basics/firstapp/running-app.html&lt;/a&gt; terkait detail untuk menjalankan program android yang telah dibangun di android studio.&lt;/p&gt;

&lt;h3 id=&quot;emulator-dan-alternatif&quot;&gt;Emulator dan Alternatif&lt;/h3&gt;

&lt;p&gt;Jika anda tidak memiliki device/smartphone/platform android, Anda juga bisa memakai emulator untuk alternatif lain. Emulator semisal ekosistem android yang dibangun dalam lingkup desktop PC/laptop anda, jadi tidak perlu menggunakan device platform android nyata tapi device tiruan yang berjalan di sistem operasi anda.&lt;/p&gt;

&lt;p&gt;Dalam program Android Studio juga terdapat emulator bawaan bernama AVD &lt;a href=&quot;https://developer.android.com/studio/run/managing-avds.html&quot;&gt;(Android Virtual Device)&lt;/a&gt; dan diluar sana ada banyak emulator populer yang bisa anda coba Bluestack, Andyroid, Windroye, Youwave, Nox, dll tidak bisa saya review kan semua disini. Saya akan menjelaskan instalasi emulator yang sering saya pakai, Genymotion.&lt;/p&gt;

&lt;p&gt;Cara menginstall genymotion, pastikan anda telah menginstall virtual box karena seperti umumnya emulator, genymotion juga berjalan diatas mesin virtual. Pastikan sistem operas anda telah terinstall virtual box, jika tidak anda bisa mendownload virtual box sesuai os yang digunakan di site &lt;a href=&quot;https://www.virtualbox.org/wiki/Downloads&quot;&gt;https://www.virtualbox.org/wiki/Downloads&lt;/a&gt; dan setelah instalasi virtual box selesai, anda bisa memasang genymotion dengan mendownload nya di &lt;a href=&quot;https://www.genymotion.com/&quot;&gt;https://www.genymotion.com/&lt;/a&gt; genymotion tersedia dalam versi berbayar tapi anda juga bisa mengguanakan versi gratis. Untuk meng unduh nya anda diharuskan mendaftar terlebih dahulu di site tersebut.&lt;/p&gt;

&lt;p&gt;Setelah download, silahkan install dan jalankan genymotion, kemudian pilih dan download salah satu versi os android yang akan anda pakai dalam membangun aplikasi android nantinya, lebih baik untuk versi saat ini API 15 keatas untuk mendukung lingkungan pengembangan yang baik dan setelah proses download selesai, jalankan dengan mengklik tombol play pada jendela genymotion. Untuk menghubungkan genymotion pada android studio juga disediakan plugin genymotion, anda bisa install plugin genymotion di android studio, klik &lt;strong&gt;Configure &amp;gt; Plugins &amp;gt; Browse Repositories&lt;/strong&gt; kemudian ketik genymotion dan cari. Kemudian klik &lt;strong&gt;Install Plugin&lt;/strong&gt; pada menu list genymotion dan tunggu instalasai selesai, kemudian klik restart jika proses instalasi selesai untuk menerapkan konfigurasi plugin terbaru pada android studio anda. Kini anda bisa menjalankan os pada emulator genymotion baik dari aplikasi genymotion atau langsung klik icon genymotion pada bagian toolbar di android studio anda. Jika android emulator telah berjalan kini anda bisa melakukan debugging seperti halnya melakukan debugging pada smartphone biasa.&lt;/p&gt;

&lt;p&gt;Disini saya ingin berbagi link download master file os android dalam bentuk ova, seperti yang sebelumnya anda download secara online melalui aplikasi genymotion sebenarnya juga bisa memasang os android di genymotion tanpa harus download melalui aplikasinya dengan menggunakan fasilitas import pada virtual box, dimana cara ini sangat efektif dan efisien dalam penggunaan pembelajaran umum/masal dalam satu tempat, untuk lebih jelasnya anda bisa mengunjungi &lt;a href=&quot;https://github.com/CreatorB/Virtual/tree/master/genymotion&quot;&gt;https://github.com/CreatorB/Virtual/tree/master/genymotion&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Mungkin sampai disini dulu tulisan saya, mohon maaf apabila terdapat penjabaran yang terlalu global anda bisa merujuk pada beberapa website untuk detail terkait apa yang saya bahas diatas karena memang niatan saya pribadi untuk lebih menjabarkan proses instalasi secara umum dan tentu berusaha untuk tidak melewatkan poin penting dari beberapa aspek yang dibahas, semoga bisa bermanfaat.&lt;/p&gt;

&lt;p&gt;./creatorb&lt;/p&gt;
</description>
        <pubDate>Wed, 29 Mar 2017 04:50:41 +0000</pubDate>
        <link>https://creatorbe.github.io/programming/android/2017/03/29/cara-install-android-studio-creatorbe.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/programming/android/2017/03/29/cara-install-android-studio-creatorbe.html</guid>
        
        
        <category>programming</category>
        
        <category>android</category>
        
      </item>
    
      <item>
        <title>gh-pages Rocks!</title>
        <description>&lt;p&gt;This blog I’ve been made by love using GitHub Pages and Jekyll Themes combination. I learned some advantages and disadvantages about what the heck is it and how we can work with it, well I thought I should to create a short guides. Lets have fun! this is a way to understanding how &lt;a href=&quot;https://creatorbe.github.io&quot;&gt;creatorbe links&lt;/a&gt; works behind the scenes.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://raw.githubusercontent.com/creatorbe/creatorbe.github.io/master/static/img/creatorbe-links-creatorb.png&quot; alt=&quot;creatorbelinks-vim&quot; /&gt;&lt;/p&gt;

&lt;h3 id=&quot;introduction&quot;&gt;Introduction&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;gh-pages&lt;/strong&gt;, &lt;em&gt;github pages&lt;/em&gt; Like as jekyllrb mentioned, GitHub Pages are public web pages for users, organizations, and repositories, that are freely hosted on GitHub’s github.io domain or on a custom domain name of your choice. GitHub Pages are powered by Jekyll behind the scenes, so in addition to supporting regular HTML content, they are also a great way to host your Jekyll-powered website for free.&lt;/p&gt;

&lt;h3 id=&quot;how-cool-is-that&quot;&gt;How Cool is that&lt;/h3&gt;

&lt;p&gt;of course! it’s really pretty cool, based on &lt;em&gt;KEEP IT SIMPLE &lt;strong&gt;SMART&lt;/strong&gt;&lt;/em&gt; in a way to transform your plain text into awesome blogs. &lt;em&gt;Why awesome?&lt;/em&gt; because there’s &lt;strong&gt;No Databases&lt;/strong&gt; and going &lt;strong&gt;Fast&lt;/strong&gt;. Yeah all posts and pages will convert to static HTML and here we can’t execute php, we know the vast majority of vulnerabilities that affect platforms come from that and now you don’t have spend as much time to installing security updates, at the least the entry points to hack is your self.&lt;/p&gt;

&lt;h3 id=&quot;getting-started&quot;&gt;Getting Started&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Github Pages Quickstart&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;You must have &lt;a href=&quot;https://github.com&quot;&gt;github&lt;/a&gt; account and basic knowledge how work with that. This is my account &lt;a href=&quot;https://creatorb&quot;&gt;github.com/creatorb&lt;/a&gt;.&lt;/li&gt;
  &lt;li&gt;Create new repo &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;username.github.io&lt;/code&gt; replacing username with your sub domain as you want and make sure it is public repositories.&lt;/li&gt;
  &lt;li&gt;You can upload your index.html,image or another resources to your &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;username.github.io&lt;/code&gt; then commit and push.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Congrats! your site have been live now, let’s check it out on your browser https://username.github.io&lt;/p&gt;

&lt;p&gt;Yep, that’s my simple explanations about github pages, if you need more stuff you can visit &lt;a href=&quot;https://guides.github.com/features/pages/&quot;&gt;github pages documentation&lt;/a&gt; to know more how easy is that.&lt;/p&gt;

&lt;h3 id=&quot;lets-rocks&quot;&gt;Lets Rocks!&lt;/h3&gt;

&lt;p&gt;If you has known about the basic of github pages, Now improve it and Powering your site using Jekyll. What is jekyll?&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://jekyllrb.com/&quot;&gt;Jekyll&lt;/a&gt; is an awesome open source project started at GitHub in a few years ago that a static site generator allows you to create a blog or a website without having to worry about complicated administrative tools,like databases,etc. Jekyll stores everything inside of text files and you can publish your posts using Markdown markup language (you can check my markdown cheatsheet here).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Jekyll Quickstart&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;this is how you can create new jekyll site.&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;c&quot;&gt;# Install Jekyll and Bundler gems through RubyGems&lt;/span&gt;
~ &lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;gem &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;jekyll bundler

&lt;span class=&quot;c&quot;&gt;# Create a new Jekyll site at ./creatorbe.github.io&lt;/span&gt;
~ &lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;jekyll new creatorbe.github.io

&lt;span class=&quot;c&quot;&gt;# Change into your new directory&lt;/span&gt;
~ &lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;cd &lt;/span&gt;creatorbe.github.io

&lt;span class=&quot;c&quot;&gt;# Build the site on the preview server&lt;/span&gt;
~/creatorbe.github.io &lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;bundle &lt;span class=&quot;nb&quot;&gt;exec &lt;/span&gt;jekyll serve
&lt;span class=&quot;c&quot;&gt;# you can also only use `jekyll serve` command to start preview on server&lt;/span&gt;

&lt;span class=&quot;c&quot;&gt;# Now check it out on your browser by going to http://localhost:4000&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Cool, now you can edit and combine your jekyll site and put it live on your github site.&lt;/p&gt;

&lt;p&gt;btw you need full Ruby development environment with all headers and RubyGems installed to create new jekyll site by that command, you can see jekyll requirements &lt;a href=&quot;https://jekyllrb.com/docs/installation/#requirements&quot;&gt;here&lt;/a&gt; and if you want to work with it you can also check &lt;a href=&quot;https://jekyllrb.com/docs/home/&quot;&gt;jekyll documentation&lt;/a&gt; to knowing deep inside that the implementation.&lt;/p&gt;

&lt;h3 id=&quot;awesome-stuff&quot;&gt;Awesome Stuff&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;a href=&quot;https://github.com/jekyll&quot;&gt;github.com/jekyll&lt;/a&gt; there is jekyll official repositories, a place where you can found any person who work with the coolest thinks of Jekyll blogs, there’s place you can browse jekyll themes, plugins, seo-tags and an another awesome stuff, Have Fun!.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;a href=&quot;https://talk.jekyllrb.com/&quot;&gt;Jekyll Talk&lt;/a&gt; A place for the Jekyll community to ask questions, get help, and share their wonderful creations!&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;If you are a person who dont have knowledge as deep in software development, dont let it dissuade you because you can get it one as easy by fork what a themes you want to use and then you need edit some stuff, check their documentation, and finally hell yeah you can make it live on your repository, thats is really simple right?. An awesome one is you can also built &lt;a href=&quot;http://prose.io/&quot;&gt;Prose.io&lt;/a&gt;, a web-based content editor specifically designed to &lt;em&gt;MAKE IT SIMPLE &lt;strong&gt;STUPID&lt;/strong&gt;&lt;/em&gt; for content creators to publish to Jekyll on GitHub Pages, in my case i &lt;em&gt;MAKE IT SIMPLE &lt;strong&gt;SMART&lt;/strong&gt;&lt;/em&gt; :l, thats how cool im :p haha! but overall it just editor choices, you can choose which one’s you comfortable to work with it. Enjoy! and make your life easier.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h3&gt;

&lt;p&gt;Hmm, what? wait… maybe at the least i just wanna say i can’t compare this heck with an another greats cms. Because overall it’s depend with what a site do you want to builds, jekyll isn’t site for handle task like managing database user or an another difficult server-side logic.&lt;/p&gt;

&lt;p&gt;I live in here because i just need simplicity and minimalism place, where there i can push my valuable string to live on internet and everyone can read it and get in touch with me as reader or software engineer :)&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://raw.githubusercontent.com/creatorbe/creatorbe.github.io/master/static/img/creatorbe-links-android.png&quot; alt=&quot;creatorbelinks-android&quot; /&gt;&lt;/p&gt;

&lt;p&gt;./creatorb&lt;/p&gt;
</description>
        <pubDate>Mon, 26 Oct 2015 05:56:06 +0000</pubDate>
        <link>https://creatorbe.github.io/en/git/minds/2015/10/26/gh-pages-creatorbe.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/en/git/minds/2015/10/26/gh-pages-creatorbe.html</guid>
        
        
        <category>en</category>
        
        <category>git</category>
        
        <category>minds</category>
        
      </item>
    
      <item>
        <title>CBCS - Creatorb Cheatsheet</title>
        <description>&lt;p&gt;CBCS (creatorbe cheatsheet) a way to make my life easier.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg&quot; alt=&quot;Awesome&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;https://img.shields.io/badge/Helpful_%3F-A_lot-ff69b4.svg?style=flat&quot; alt=&quot;Waffle.io&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3 id=&quot;arabic--meaningful-words&quot;&gt;&lt;a href=&quot;#arabic&quot;&gt;Arabic&lt;/a&gt; : Meaningful words&lt;/h3&gt;

&lt;h3 id=&quot;list&quot;&gt;&lt;a href=&quot;#list&quot;&gt;List&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;#github-markdown&quot;&gt;GitHub Markdown&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;#blockquotes&quot;&gt;Blockquotes&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#checklist&quot;&gt;Checklist&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#code&quot;&gt;Code&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#emoji&quot;&gt;Emoji&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#headers&quot;&gt;Headers&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#html-inline&quot;&gt;HTML inline&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#images&quot;&gt;Images&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#line&quot;&gt;Line&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#link&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#list-menu&quot;&gt;List Menu&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#tables&quot;&gt;Tables&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#text&quot;&gt;Text&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#youtube-videos&quot;&gt;Youtube Videos&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;arabic&quot;&gt;Arabic&lt;/h2&gt;

&lt;p&gt;بسم الله الرحمن الرحيم&lt;/p&gt;

&lt;p&gt;﷽&lt;/p&gt;

&lt;p&gt;ﷲ‎ ﷻ‎&lt;/p&gt;

&lt;p&gt;ﷴ ﷺ‎&lt;/p&gt;

&lt;p&gt;ألسلام عليكم ورحمة الله وبركاته&lt;/p&gt;

&lt;p&gt;وعليكم السلام ورحمة الله وبركاته&lt;/p&gt;

&lt;p&gt;جزاكم الله خيرا&lt;/p&gt;

&lt;p&gt;أحسن الله إليكم&lt;/p&gt;

&lt;p&gt;بخير والحمد لله … لعلك كَذَٰلِكَ&lt;/p&gt;

&lt;p&gt;وأنتم فجزاكم الله خيرا&lt;/p&gt;

&lt;p&gt;وَفِيْك بَارَكَ اللهُ&lt;/p&gt;

&lt;p&gt;وَالله يبارك فيكم&lt;/p&gt;

&lt;p&gt;آمِين وَأَنْتَ كَذَلِك&lt;/p&gt;

&lt;p&gt;آمِين زادنا الله علما وحرص&lt;/p&gt;

&lt;p&gt;مَاشَآءَاللّهُ تَبَارَكَ اللهُ  نِعْمَ أَنْت&lt;/p&gt;

&lt;p&gt;بَارَكَ اللهُ فِيْكُم&lt;/p&gt;

&lt;p&gt;ين&lt;/p&gt;

&lt;p&gt;ﻧﺴﺄﻝ ﺍﻟﻠﻪ ﺍﻟﺴﻼﻣﺔ ﻭﺍﻟﻌﺎﻓﻴﺔ&lt;/p&gt;

&lt;p&gt;إن شاء الله&lt;/p&gt;

&lt;p&gt;ماشاء الله تبارك الله&lt;/p&gt;

&lt;p&gt;عَفْوًا&lt;/p&gt;

&lt;p&gt;الْحَمْدُ لِلَّهِ الَّذِي بِنِعْمَتِهِ تَتِمُّ الصَّالِحَاتُ&lt;/p&gt;

&lt;p&gt;الْحَمْدُ لِلَّهِ عَلَى كُلِّ حَالٍ&lt;/p&gt;

&lt;p&gt;More details : &lt;a href=&quot;https://en.wikipedia.org/wiki/Arabic_script_in_Unicode&quot;&gt;Wiki Arabic Script Unicode&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&quot;github-markdown&quot;&gt;GitHub Markdown&lt;/h2&gt;

&lt;h3 id=&quot;blockquotes&quot;&gt;Blockquotes&lt;/h3&gt;

&lt;pre&gt;&lt;code class=&quot;language-no-highlight&quot;&gt;&amp;gt; Blockquotes are very handy in email to emulate reply text.
&amp;gt; This line is part of the same quote.
 
Quote break.
 
&amp;gt; This is a very long line that will still be quoted properly when it wraps. Oh boy let&apos;s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 
&lt;/code&gt;&lt;/pre&gt;

&lt;blockquote&gt;
  &lt;p&gt;Blockquotes are very handy in email to emulate reply text.
This line is part of the same quote.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Quote break.&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can &lt;em&gt;put&lt;/em&gt; &lt;strong&gt;Markdown&lt;/strong&gt; into a blockquote.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;
  &lt;p&gt;Blockquote&lt;/p&gt;
  &lt;blockquote&gt;
    &lt;p&gt;Nested blockquote&lt;/p&gt;
  &lt;/blockquote&gt;
&lt;/blockquote&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Markdown :  &amp;gt; Blockquote
          &amp;gt;&amp;gt; Nested Blockquote
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;checklist&quot;&gt;Checklist&lt;/h3&gt;
&lt;ul class=&quot;task-list&quot;&gt;
  &lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; class=&quot;task-list-item-checkbox&quot; disabled=&quot;disabled&quot; /&gt;An uncompleted task&lt;/li&gt;
  &lt;li class=&quot;task-list-item&quot;&gt;&lt;input type=&quot;checkbox&quot; class=&quot;task-list-item-checkbox&quot; disabled=&quot;disabled&quot; checked=&quot;checked&quot; /&gt;A completed task&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt; Markdown : - [ ] An uncompleted task
          - [x] A completed task
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;code&quot;&gt;Code&lt;/h3&gt;
&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;code()&lt;/code&gt;&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Markdown :  `code()`
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;div class=&quot;language-xml highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;RelativeLayout&lt;/span&gt; 
    &lt;span class=&quot;na&quot;&gt;xmlns:android=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;http://schemas.android.com/apk/res/android&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;xmlns:tools=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;http://schemas.android.com/tools&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;match_parent&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;match_parent&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingLeft=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_horizontal_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingRight=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_horizontal_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingTop=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_vertical_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;android:paddingBottom=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@dimen/activity_vertical_margin&quot;&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;tools:context=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;.CreatorbeActivity&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;nt&quot;&gt;&amp;lt;TextView&lt;/span&gt; 
        &lt;span class=&quot;na&quot;&gt;android:text=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;Coding&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;@+id/textview&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_width=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;android:layout_height=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;wrap_content&quot;&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;/&amp;gt;&lt;/span&gt;

&lt;span class=&quot;nt&quot;&gt;&amp;lt;/RelativeLayout&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Markdown : ```xml

			&amp;lt;RelativeLayout 
				    xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
				    xmlns:tools=&quot;http://schemas.android.com/tools&quot;
				    android:layout_width=&quot;match_parent&quot;
				    android:layout_height=&quot;match_parent&quot;
				    android:paddingLeft=&quot;@dimen/activity_horizontal_margin&quot;
				    android:paddingRight=&quot;@dimen/activity_horizontal_margin&quot;
				    android:paddingTop=&quot;@dimen/activity_vertical_margin&quot;
				    android:paddingBottom=&quot;@dimen/activity_vertical_margin&quot;
				    tools:context=&quot;.CreatorbeActivity&quot;&amp;gt;

				    &amp;lt;TextView 
				        android:text=&quot;Coding&quot;
				        android:id=&quot;@+id/textview&quot;
				        android:layout_width=&quot;wrap_content&quot;
				        android:layout_height=&quot;wrap_content&quot; /&amp;gt;

			&amp;lt;/RelativeLayout&amp;gt;

           ```
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;emoji&quot;&gt;Emoji&lt;/h3&gt;
&lt;p&gt;emoji :smile: :thumbsup: &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;emoji :smile: :thumbsup:&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;NOTE: &lt;a href=&quot;http://www.webpagefx.com/tools/emoji-cheat-sheet/&quot; target=&quot;_blank&quot;&gt;Emoji cheat sheet for Github&lt;/a&gt;&lt;/p&gt;

&lt;h3 id=&quot;headers&quot;&gt;Headers&lt;/h3&gt;

&lt;pre&gt;&lt;code class=&quot;language-no-highlight&quot;&gt;# H1
## H2
### H3
#### H4
##### H5
###### H6
 
Alternatively, for H1 and H2, an underline-ish style:
 
Alt-H1
======
 
Alt-H2
------
&lt;/code&gt;&lt;/pre&gt;

&lt;h1 id=&quot;h1&quot;&gt;H1&lt;/h1&gt;
&lt;h2 id=&quot;h2&quot;&gt;H2&lt;/h2&gt;
&lt;h3 id=&quot;h3&quot;&gt;H3&lt;/h3&gt;
&lt;h4 id=&quot;h4&quot;&gt;H4&lt;/h4&gt;
&lt;h5 id=&quot;h5&quot;&gt;H5&lt;/h5&gt;
&lt;h6 id=&quot;h6&quot;&gt;H6&lt;/h6&gt;

&lt;p&gt;Alternatively, for H1 and H2, an underline-ish style:&lt;/p&gt;

&lt;h1 id=&quot;alt-h1&quot;&gt;Alt-H1&lt;/h1&gt;

&lt;h2 id=&quot;alt-h2&quot;&gt;Alt-H2&lt;/h2&gt;

&lt;h3 id=&quot;html-inline&quot;&gt;HTML inline&lt;/h3&gt;

&lt;p&gt;You can also use raw HTML in your Markdown, and it’ll mostly work pretty well.&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-no-highlight&quot;&gt;&amp;lt;dl&amp;gt;
  &amp;lt;dt&amp;gt;Definition list&amp;lt;/dt&amp;gt;
  &amp;lt;dd&amp;gt;Is something people use sometimes.&amp;lt;/dd&amp;gt;
 
  &amp;lt;dt&amp;gt;Markdown in HTML&amp;lt;/dt&amp;gt;
  &amp;lt;dd&amp;gt;Does *not* work **very** well. Use HTML &amp;lt;em&amp;gt;tags&amp;lt;/em&amp;gt;.&amp;lt;/dd&amp;gt;
&amp;lt;/dl&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;dl&gt;
  &lt;dt&gt;Definition list&lt;/dt&gt;
  &lt;dd&gt;Is something people use sometimes.&lt;/dd&gt;
 
  &lt;dt&gt;Markdown in HTML&lt;/dt&gt;
  &lt;dd&gt;Does *not* work **very** well. Use HTML &lt;em&gt;tags&lt;/em&gt;.&lt;/dd&gt;
&lt;/dl&gt;

&lt;h3 id=&quot;images&quot;&gt;Images&lt;/h3&gt;

&lt;pre&gt;&lt;code class=&quot;language-no-highlight&quot;&gt;Here&apos;s our logo (hover to see the title text):
 
Inline-style: 
![alt text](https://raw.githubusercontent.com/creatorbe/creatorbe.github.io/master/static/img/favicon.ico &quot;Logo Title Text 1&quot;)
 
Reference-style: 
![alt text][logo]
 
[logo]: https://raw.githubusercontent.com/creatorbe/creatorbe.github.io/master/static/img/favicon.ico &quot;Logo Title Text 2&quot;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Here’s our logo (hover to see the title text):&lt;/p&gt;

&lt;p&gt;Inline-style: 
&lt;img src=&quot;https://raw.githubusercontent.com/creatorbe/creatorbe.github.io/master/static/img/favicon.ico&quot; alt=&quot;alt text&quot; title=&quot;Logo Title Text 1&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Reference-style: 
&lt;img src=&quot;https://raw.githubusercontent.com/creatorbe/creatorbe.github.io/master/static/img/favicon.ico&quot; alt=&quot;alt text&quot; title=&quot;Logo Title Text 2&quot; /&gt;&lt;/p&gt;

&lt;h3 id=&quot;line&quot;&gt;Line&lt;/h3&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Three or more...
 
---
 
Hyphens
 
***
 
Asterisks
 
___
 
Underscores
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Three or more…&lt;/p&gt;

&lt;hr /&gt;

&lt;p&gt;Hyphens&lt;/p&gt;

&lt;hr /&gt;

&lt;p&gt;Asterisks&lt;/p&gt;

&lt;hr /&gt;

&lt;p&gt;Underscores&lt;/p&gt;

&lt;h3 id=&quot;link&quot;&gt;Link&lt;/h3&gt;

&lt;p&gt;There are two ways to create links.&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-no-highlight&quot;&gt;[I&apos;m an inline-style link](https://creatorbe.github.io)
 
[I&apos;m an inline-style link with title](https://creatorbe.github.io &quot;Creatorb&apos;s Link&quot;)
 
[I&apos;m a reference-style link][Arbitrary case-insensitive reference text]
 
[I&apos;m a relative reference to a repository file](../blob/master/LICENSE)
 
[You can use numbers for reference-style link definitions][1]
 
Or leave it empty and use the [link text itself]
 
Some text to show that the reference links can follow later.
 
[arbitrary case-insensitive reference text]: https://github.com
[1]: http://github.com
[link text itself]: http://github.com
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;a href=&quot;https://creatorbe.github.io&quot;&gt;I’m an inline-style link&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://creatorbe.github.io&quot; title=&quot;Creatorb&apos;s Link&quot;&gt;I’m an inline-style link with title&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://github.com&quot;&gt;I’m a reference-style link&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;../blob/master/LICENSE&quot;&gt;I’m a relative reference to a repository file&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://github.com&quot;&gt;You can use numbers for reference-style link definitions&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Or leave it empty and use the &lt;a href=&quot;https://github.com&quot;&gt;link text itself&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Some text to show that the reference links can follow later.&lt;/p&gt;

&lt;h3 id=&quot;list-menu&quot;&gt;List Menu&lt;/h3&gt;
&lt;ul&gt;
  &lt;li&gt;Bullet list
    &lt;ul&gt;
      &lt;li&gt;Nested bullet
        &lt;ul&gt;
          &lt;li&gt;Sub-nested bullet etc&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Bullet list item 2&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt; Markdown : * Bullet list
              * Nested bullet
                  * Sub-nested bullet etc
          * Bullet list item 2
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;ol&gt;
  &lt;li&gt;A numbered list
    &lt;ol&gt;
      &lt;li&gt;A nested numbered list&lt;/li&gt;
      &lt;li&gt;Which is numbered&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;Which is numbered&lt;/li&gt;
&lt;/ol&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt; Markdown : 1. A numbered list
              1. A nested numbered list
              2. Which is numbered
          2. Which is numbered
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;tables&quot;&gt;Tables&lt;/h3&gt;
&lt;p&gt;Simple Table&lt;/p&gt;

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;First Header&lt;/th&gt;
      &lt;th&gt;Second Header&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Content Cell&lt;/td&gt;
      &lt;td&gt;Content Cell&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Content Cell&lt;/td&gt;
      &lt;td&gt;Content Cell&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;pre&gt;&lt;code class=&quot;language-no-highlight&quot;&gt;Colons can be used to align columns.
 
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
 
The outer pipes (|) are optional, and you don&apos;t need to make the raw Markdown line up prettily. You can also use inline Markdown.
 
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Colons can be used to align columns.&lt;/p&gt;

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Tables&lt;/th&gt;
      &lt;th style=&quot;text-align: center&quot;&gt;Are&lt;/th&gt;
      &lt;th style=&quot;text-align: right&quot;&gt;Cool&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;col 3 is&lt;/td&gt;
      &lt;td style=&quot;text-align: center&quot;&gt;right-aligned&lt;/td&gt;
      &lt;td style=&quot;text-align: right&quot;&gt;$1600&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;col 2 is&lt;/td&gt;
      &lt;td style=&quot;text-align: center&quot;&gt;centered&lt;/td&gt;
      &lt;td style=&quot;text-align: right&quot;&gt;$12&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;zebra stripes&lt;/td&gt;
      &lt;td style=&quot;text-align: center&quot;&gt;are neat&lt;/td&gt;
      &lt;td style=&quot;text-align: right&quot;&gt;$1&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;The outer pipes (&lt;/td&gt;
      &lt;td&gt;) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Markdown&lt;/th&gt;
      &lt;th&gt;Less&lt;/th&gt;
      &lt;th&gt;Pretty&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;em&gt;Still&lt;/em&gt;&lt;/td&gt;
      &lt;td&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;renders&lt;/code&gt;&lt;/td&gt;
      &lt;td&gt;&lt;strong&gt;nicely&lt;/strong&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;3&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;h3 id=&quot;text&quot;&gt;Text&lt;/h3&gt;

&lt;p&gt;Common text&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Markdown :  Common text
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;em&gt;Emphasized text&lt;/em&gt;&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Markdown :  _Emphasized text_ or *Emphasized text*
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;del&gt;Strikethrough text&lt;/del&gt;&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Markdown :  ~~Strikethrough text~~
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Strong text&lt;/strong&gt;&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Markdown :  __Strong text__ or **Strong text**
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Strong emphasized text&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Markdown :  ___Strong emphasized text___ or ***Strong emphasized text***
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Backslash Escapes
Markdown allows you to use backslash escapes to generate literal characters which
would otherwise have special meaning in Markdown’s formatting syntax.&lt;/p&gt;

&lt;p&gt;*literal asterisks*&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Markdown : \*literal asterisks\*
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;@mentions&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Markdown : @mentions
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;youtube-videos&quot;&gt;Youtube Videos&lt;/h3&gt;
&lt;p&gt;They can’t be added directly but you can add an image with a link to the video, change 0.jpg to your image you want to show, like this:&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-no-highlight&quot;&gt;&amp;lt;a href=&quot;http://www.youtube.com/watch?feature=player_embedded&amp;amp;v=YOUTUBE_VIDEO_ID_HERE
&quot; target=&quot;_blank&quot;&amp;gt;&amp;lt;img src=&quot;http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg&quot; 
alt=&quot;IMAGE ALT TEXT HERE&quot; width=&quot;240&quot; height=&quot;180&quot; border=&quot;10&quot; /&amp;gt;&amp;lt;/a&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Or, in pure Markdown, but losing the image sizing and border:&lt;/p&gt;

&lt;pre&gt;&lt;code class=&quot;language-no-highlight&quot;&gt;[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Referencing a bug by #bugID in your git commit links it to the slip. For example #1.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://www.youtube.com/channel/UCbyEh3nQ0H_7-P5ukcZyUvg&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/CreatorB/res/master/pic/youtube-banner-creatorbe-medium.png&quot; alt=&quot;image alt text &quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;[![image alt text ](https://raw.githubusercontent.com/CreatorB/res/master/pic/youtube-banner-creatorbe-medium.png)](https://www.youtube.com/channel/UCbyEh3nQ0H_7-P5ukcZyUvg)
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;./creatorb&lt;/p&gt;
</description>
        <pubDate>Wed, 04 Dec 2013 05:00:00 +0000</pubDate>
        <link>https://creatorbe.github.io/en/minds/2013/12/04/cbcs-creatorb-cheatsheet-creatorbe.html</link>
        <guid isPermaLink="true">https://creatorbe.github.io/en/minds/2013/12/04/cbcs-creatorb-cheatsheet-creatorbe.html</guid>
        
        
        <category>en</category>
        
        <category>minds</category>
        
      </item>
    
  </channel>
</rss>
