Sunday, September 20, 2020

Mengenal Apa itu Hosting dan Penyedia Hosting

Sebenarnya Apa itu hosting ?

Hosting merupakan lokasi atau media yang digunakan untuk menyimpan data baik itu folder, ataupun file-file website seperti video, audio, html, CSS, dan lain sebagainya.

Bila di umpamakan Hosting ini seperti lahan atau lokasi tempat kita membangun rumah dan domain sebagai alamatnya. Website sendiri bisa kita umpamakan sebagai rumah yang telah dibangun.

Apakah penting memiliki hosting ?

Penting tidaknya tergantung kebutuhan anda apakah anda membuat website untuk dijalankan secara offline atau online.

Jika website anda di tujukan untuk online maka anda wajib memiliki hosting. Sebab hosting akan menyimpan website anda secara online sehingga dapat di akses kapan saja dan dimana saja asalkan ada akses internet.

Dimana saya bisa mendapatkan hosting ?

Anda bisa membuat hosting sendiri hanya saja ini memerlukan keahlian atau pengetahuan tentang jaringan, dan tentunya dana yang lebih banyak.

Sebagai alternatif anda bisa membeli hosting melalui jasa penyedia hosting. Berikut beberapa jasa penyedia hosting :

1. Niagahoster.co.id

2. Rumahweb.com

3. Hostinger.co.id

4. Idwebhost.com

5. Exabytes.co.id

Selain yang sudah disebutkan di atas, masih banyak lagi penyedia hosting yang bisa anda cari di google dengan kata kunci penyedia hosting.

7 Software Web Server yang Paling Sering Digunakan Programer

Software Web server merupakan sebuah aplikasi perangkat lunak yang berfungsi untuk menerima dan merespon permintaan atau request dari web browser. Contohnya user mengakses url website di browser yaitu "http://localhost/home" maka web server bertugas menerjemahkan url ini dan memberikan respon sesuai dengan yang di akses entah itu brupa menampilkan halaman web atau sebagainya.

Pada era sekarang terdapat berbagai macam aplikasi web server yang bisa digunakan. Namun dari banyaknya itu ada beberapa software yang paling sering digunakan. Berikut beberapa Software Web Server yang Sering Digunakan Programer.

1. XAMPP

XAMPP merupakan gabungan dari beberapa aplikasi yang dijadikan satu dan dapat dijalankan secara lengkap. X = Cross Platform, A = Apache, M = Mysql/MariaDB, P = Php, P = Perl. Aplikasi ini menjadi web server yang paling sering di gunakan di Indonesia terutama bagi pemula dalam dunia web. Aplikasi ini berada di bawah lisensi publik umum atau GNU yang artinya aplikasi ini bersifat gratis dan terbuka untuk public.

2. Apache HTTP Web Server

Apache HTTP Web Server merupakan salah satu web server yang paling populer saat ini. Apache diluncurkan pertama kali pada tahun 1995 dan dikelola oleh Apache Software Foundation. Apache HTTP Web Server bersifat open source yang artinya gratis digunakan oleh public. Selain itu software ini memiliki kemudahan konfigurasi dan tidak sulit bagi pemula.

3. Nginx

Nginx merupakan Web Server baru yang mulai diperkenalkan pada bulan Oktober 2004. Meskipun tergolong baru Nginx nyatanya mampu menarik perhatian para developer yang menjadikannya salah satu aplikasi Web Server paling populer. Salah satu keunggulan Nginx dibandingkan aplikasi serupa lainnya adalah kemampuannya dalam menangani jumlah koneksi yang banyak. Nginx sangat cocok digunakan untuk website yang membutuhkan trafik yang tinggi.

4. LAMP

LAMP merupakan singkatan dari Linux, Apache, Mysql, PHP/Perl/Python. LAMP adalah paket perangkat lunak bebas yang digunakan untuk menjalankan aplikasi secara lengkap. Oleh karena aplikasi ini terdapat Apache jadi LAMP juga bisa digunakan sebagai software Web Server. Sesuai dengan namanya LAMP ini dikhususkan untuk sistem operasi Linux.

5. WAMP

Berbeda dengan LAMP yang dikhususkan untuk Linux, WAMP dikhususkan untuk sistem operasi Windows. WAMP merupakan singkatan dari Windows, Apache, MySQL, PHP. Sama halnya seperti LAMP, WAMP ditujukan untuk menjalankan aplikasi secara lengkap.

6. AMPPS

AMPPS merupakan singkatan dari Apache, Mysql, MongoDB, PHP, Perl, Python dan Softaculous auto-installer. Aplikasi web server ini dibuat oleh Softaculous Ltd dan dapat di install pada sistem operasi Windows, Linux, dan MacOS.

7. IIS

IIS atau Internet Information Server merupakan web server yang digunakan oleh sistem operasi Windows. Software ini memiliki kegunaan utama sebagai pendukung protokol TCP/IP yang berjalan dalam lapisan aplikasi (aplication layer). Layanan yang diberikan seperti FTP, FTPS, SMTP, NNTP, dan HTTP/HTTPS.

Membuat Aplikasi Text to Speach di Android Studio

Aplikasi Text to Speach merupakan aplikasi yang mampu mengubah sebuah text menjadi suara. Jika kamu pernah menggunakan google assistensi maka kamu sudah pernah menggunakan fitur Text to Speach ini.

Aplikasi Text to Speach ini bisa anda buat menggunakan Android Studio, cara pembuatannya juga sangat mudah sebab di dalam Android Studio sudah terdapat library atau class untuk membuat fitur ini.

Hal pertama yang harus anda lakukan adalah membuat project baru. Untuk yang baru belajar baca cara membuat project baru disini. Jika sudah silahkan lanjut dengan mengedit dua file utama bawah ini :

1. MainActivity.java

Keterangan
Pada kode int res = mTTS.setLanguage(Locale.ENGLISH); anda bisa menggantinya menggunakan suara atau logat dari negara lain.

2. activity_main.xml

Kode mTTS.speak(c, TextToSpeech.QUEUE_FLUSH, null); inilah yang melakukan aksi mengubah text menjadi suara, ketika button di klik.

3. Jalankan aplikasi

Silahkan jalankan aplikasi dan tes dengan memasukkan kata atau kalimat kemudian tekan button jika berhasil maka akan terdengar suara dari kata yang di masukkan. Perlu di ingat bahwa tidak semua perangkat mendukung fitur ini.

Cara Membuat Menu Auto Fixed Ketika di Scroll | WEB

Auto Fixed disini biasanya banyak di terapkan pada web-website yang ingin memiliki tampilan atau design web yang lebih menarik. Jadi simpelnya ketika kita melakukan scroll ke bawah menu yang tadinya posisinya tetap akan berubah menjadi fixed di atas atau di bagian tertentu yang sudah di tentukan.

Untuk membuat tampilan website anda seperti ini sangatlah mudah anda bisa memanfaatkan fitur javascript. Sebagai contoh disini kita akan membuatnya dengan tampilan html sederhana seperti berikut :

Ketika anda melakukan aksi scroll maka tampilan akan menjadi seperti berikut :

Kode cara Membuat Menu Auto Fixed Ketika di Scroll


<!DOCTYPE html>
<html>
<head>
	<title>Coding Rakitan</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<style type="text/css">
		body{
			height: 2000px;margin: 0px;padding: 0px;
		}.bl{
			height: 200px;
		}
		.menu{
			height: 50px;
			background: #001b6a;
			width: 100%;
		}.fx{
			top: 0px;
			position: fixed;
		}.d-flex{
			display: flex;
			height: 100%;
		}.menu a{
			margin-right: 20px;
			margin-bottom: auto;
			margin-top: auto;
			color: white;
			font-family: sans-serif;
		}.m-auto{
			margin: auto;
		}h1{
			font-size: 83px;
			font-family: sans-serif;
		}
	</style>
</head>
<body >
<div class="bl">
	<div class="d-flex">
		<h1 class="m-auto">Coding Rakitan</h1>
	</div>
</div>
<div class="menu" id="menu">
	<div class="d-flex">
		<a>Menu 1</a>
		<a>Menu 2</a>
		<a>Menu 3</a>
		<a>Menu 4</a>
	</div>
</div>
<br>
<div class="d-flex">
	
	<img class="m-auto" style="margin-top: 0px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKb401NNIMCTN4hLJY6sYbJ9doTZPWRvMrwj-KEsU6xJ1FurpHhGqjfj48_K3-VQehloD6MGwOd-7z-e4DuJlz-ijqigIQpIBqQdFzEVZJn0dKk81dyLR7tYSL2xvsi9US_iRtB-w7Ir1/s2518/Screenshot_2020-09-13+CODING+RAKITAN+INSPIRASI+CODING+TERUPDATE+android+studio+laravel+php.png" style="width: 700px;">
</div>
</body>
<script type="text/javascript">
	$(function(){

	  var menu = $('#menu');
	  pos = menu.offset();

	  $(window).scroll(function(){
	   if($(this).scrollTop() > pos.top+menu.height()){
		    menu.addClass('fx');
	   } else if($(this).scrollTop() <= pos.top ){
	    	menu.removeClass('fx');
	   }
	  });

});
</script>
</html>

Kode yang perlu anda perhatikan ada pada :


<script type="text/javascript">
	$(function(){

	  var menu = $('#menu');
	  pos = menu.offset();

	  $(window).scroll(function(){
	   if($(this).scrollTop() > pos.top+menu.height()){
		    menu.addClass('fx');
	   } else if($(this).scrollTop() <= pos.top ){
	    	menu.removeClass('fx');
	   }
	  });

});
</script>

Dimana pada kode javascript di atas menginstruksikan ketika terjadi scroll kebawah dan nilai over dari scroll ini lebih besar dari over menu maka tambahkan class fx pada menu, yang mana menu fx ini akan membuat position menjadi fixed dan berada di atas atau top 0px. Sedangkan bila kebalikannya bila terjadi scroll ke atas dan nilainya lebih kecil atau sama dengan menu over maka hapus kembali class fx yang membuat menu kembali seperti semula.

Pada tutorial kali ini kita akan membuat tampilan seperti pada design home Grab. Dimana pada tampilan menampilkan card view berupa promo atau produk yang di tawarkan. Sebagai gambaran seperti apa tampilan yang akan kita buat lihat gambar di bawah.

Untuk membuat data di atas pertama-tama siapkan data berupa tulisan atau judul, deskripsi, serta link gambar kemudian masukkan pada array.xml di folder res -> values. Berikut contoh data yang sudah saya siapkan :

Langkah selanjutnya silahkan simak di bawah ini :

1. Import library android-networking

Library ini bisa digunakan untuk menampilkan gambar dari internet ke aplikasi android. Untuk memasangnya import terlebih dahulu pada dependencies build.gradle seperti berikut :

2. AndroidManifest.xml

Berikan akses internet dengan menambahkan kode pada AndroidManifest.xml contohnya letaknya seperti pada kode dibawah.

3. MainActivity.java

4. activity_main.xml

5. card.xml

Buat file xml baru dengan nama "card.xml" pada directory res -> layout.

6. colors.xml

Masuk ke res -> values -> colors.xml, edit seperti berikut.

7. ic_date_range_black.xml

Buat drawable baru pada res -> drawable -> ic_date_range_black.xml dengan kode di bawah.

Cara Memasang Fonts di Project Android Studio

Fonts merupakan satu element yang menunjang tampilan atau desain suatu aplikasi. Jenis font yang monoton akan membuat tampilan aplikasi kurang menarik. Untuk itu biasanya developer memasangkan jenis font tertentu pada aplikasi mereka.

Untuk memasang font pada aplikasi android yang dibuat anda hanya perlu menyediakan jenis font dengan format file .ttf, anda bisa mendownloadnya di www.dafint.com atau menggunakan font yang ada di komputer.

Cara Mengambil Font .ttf di Windows

1. Ketikkan "fonts" pada kolom pencarian Windows kemudian pilih fonts

2. Pilih jenis font yang anda inginkan, klik kemudian tekan "CTRL + C"

Jika terdapat banyak font di dalam font klik dua kali untuk masuk dan memilih salah satu. Anda juga bisa mencopy semuanya sekaligus.

3. Buka folder tempat anda ingin menyimpan font lalu paste.

Memasang Font pada Project Android Studio

Pastikan anda sudah memiliki font baik itu di download dari internet atau dari komputer seperti pada cara di atas. Jika sudah silahkan ikuti langkah di bawah :

1. Buka project andaroid studio

2. Klik kanan pada res -> new -> folder -> Assets Folder

3. Pada jendela baru langsung klik finish. Nantinya akan muncul directory baru bernama assets.

4. Klik kanan pada folder assets -> new -> Directory kemudian beri nama font.

5. Copy dan pastekan font anda kedalam directory font seperti pada gambar

Menerapkan Font pada TextView

Untuk menerapkan jenis font pada TextView sangatlah mudah anda tinggal menuliskan kode seperti dibawah:


Typeface typeface = Typeface.createFromAsset(getAssets(), "font/arial.ttf");
textView.setTypeface(typeface);

Pada bagian "font/arial.ttf" sesuaikan dengan nama dan directory font yang telah dibuat sebelumnya.

Apa Sih Itu Svelte Js? Bagaimana Cara Menjalankannya? Yuks Simak Pembahasan Berikut Ini

(Sumber : Website https://svelte.dev/)

Hallo Sahabat Coders, Semoga kita semua selalu diberikan Kesehatan dan keberlimpahan dalam pekerjaan atau usaha kita.

Perkembangan dunia pemrograman semakin hari semakin menjadi-jadi. Banyak Bahasa pemrograman maupun framework baru bermunculan akhir-akhir ini. Terutama framework JavaScript yang yang banyak bermunculan. Dan semuanya sangat menarik untuk dicoba.

Framework JavaScript yang terkenal saat ini contohnya Angular JS, Vue JS, React JS dan lain sebagainya dan mungkin banyak orang sudah tahu tentang framework- framework ini.

Namun, akhir-akhir ini, ada framework yang baru terkenal yaitu Svelte JS (Website : https://svelte.dev/). Framework ini Admin tahu dari seorang JavaScript Developer terkenal di Indonesia yaitu Mas Riza Fahmi (Curriculum Director di Hacktiv8 Indonesia).

Svelte Js merupakan sebuah framework JavaScript untuk menulis komponen antarmuka (user interface) yang dibuat oleh Rich Harris. Namun menurut penulisnya, Svelte Js ini bukan sekedar framework JavaScript seperti framework lainnya.

Tapi lebih dari itu Svelte JS ini seperti compiler, maksudnya kode yang kita tulis di Svelte dikonversi menjadi JavaScript yang sudah dioptimasi.

Salah satu fitur kuncinya Svelte Js ini adalah ukuran filenya kecil karena sudah dikompilasi dan dioptimasi oleh Engine Framework itu sendiri. Dan hebatnya lagi, prosesnya ini tidak menggunakan Virtual Dom.

Berikut Ini Kelebihan Framework Svelte JS :

Menulis Lebih Sedikit Code
Tidak Menggunakan Virtual DOM
Sangat Reactive

Berikut ini merupakan Langkah-langkah menginstal Svelte JS :

(Note : Untuk proses penginstalannya, disarankan menggunakan alat bantu degit untuk membangun kerangka aplikasi. Node dan npm juga merupakan keharusan untuk menggunakan framework ini.)

- #1 Install Node, NPM dan NPX bagi yang belum install. Karena saya belum install NPX maka saya install dengan cara membuka command prompt (CMD) atau untuk mac dan Linux bisa gunakan terminal.

Ketik : npm install -g npx

#2 Install Degit, Ketik : npm install -g degit Di CMD-nya.

#3 Kemudian install Svelte JS, ketik npx degit sveltejs/template my-svelte-project atau bisa download langsung filenya.

Atau untuk mempermudah, kita bisa mendownload file Svelte JS ini di website resminya (https://svelte.dev/)

Setelah di install / di download silahkan masuk di foldernya, buka CMD, ketikan perintah npm install dan untuk menjalankan project ketik npm run dev

Kalau tampilannya begini, silahkan buka browser dan jalankan di http://localhost:5000. Maka akan muncul tampilan seperti dibawah ini.

Untuk mengubah tulisannya, teman-teman bisa modifikasi file App.svelte dan Main.js didalam folder src

# File App.svelte

#File Main.js

Jika dijalankan, tampilannya seperti dibawah ini :

Sahabat Coders juga bisa memodifikasi sesuai dengan kemaunnya masing-masing, yang terpenting adalah kita memahami struktur folder dan filenya, kemudian apa yang harus di import, variable apa yang diambil, variable ini diambil dari mana.

Itu semua harus dipelajari sebelum membuat project dengan Svelte ini, biar tidak kebingungan saat menggunakannya.

Sekian dulu artikel kali ini, semoga apa yang kami bagikan bermanfaat.

#StayCodingSmileAndHappy