Tag: Membuat Website

  • Google Adsense – Daftar Program GA dengan Platform Blogger

    Google Adsense – Daftar Program GA dengan Platform Blogger

    Matamu.NET – Blogger.com adalah platform yang menyediakan layanan membuat website basis CMS. User akan diberikan kesempatan untuk membuat website dengan Bandwith, Storage, dan CDN yang tidak terbatas secara gratis selama tidak melanggar aturan komunitas mereka.

    Membuat Website dengan Blogger.

    1. silahkan logging di Gmail pada browser yang kamu gunakan
    2. masuk ke blogger.com lalu klik buat akun
    3. Buat nama blog, Sesuai dengan keinginan kamu. Namanya sama dengan website lain juga tidak masalah
    4. buat URL parameter yang akan ditampilkan dalam bentuk namadomainkamu.blogspot.com. Url ini harus unik atau tidak boleh sama dengan milik orang lain
    5. Tunggu Beberapa saat dan Blog kamu selesai dan kini sudah bisa diakses oleh orang lain.

    Catatan :

    Jika kamu ingin website kamu terlihat lebih profesional, ada baiknya kamu menyediakan domain TLD seperti .com, .net, .id dan sejenisnya. Setelah itu, redirect url namadomainkamu.blogspot.com ke namadomainkamu.com misalnya.

    Fasilitas re-direct dapat diakses di Setelan > mempublikasikan

    Layanan redirect Domain dari Blogspot ke TLD

    Menyiapkan website

    Sebelum mendaftarkan ke program Google Adsense sebaiknya kita siapkan persyaratan yang harus dipenuhi :

    1. Ganti templete yang kamu gunakan dengan Templete yang valid HTML 5. Sebaiknya gunakan pengembang Templet Profesional seperti Sugeng.ID
    2. Siapkan identitas situs :
      1. About Us – Penjelasan mengenai siapa kamu atau situs kamu
      2. Privacy Policy – Penjelasan mengenai aturan kebijakan yang kamu terapkan di blog kamu. Aturan ini mengikut dengan platform blogger. kamu boleh kok meniru Privacy Policy dari blog orang lain
      3. Disclaimer – Penjelasan seputar hak dna kewajiban yang didapatkan pengunjung selama berada di situs kamu. Sama dengan Privacy Policy kamu bisa meniru dari blog orang lain.
      4. Contact Us – Informasi dan cara menghubungi administrator seperti alamat email atau formulir online.
    3. Perbaiki Navigasi di Blog kamu seperti artikel berdasarkan label lalu dijadikan Navigasi atas, sedangkan Identitas situs dijadikan di bagian footer.
    4. Mulai buat artikel melalui Postingan.

    Catatan :

    Buatlah identitas situs kamu di Laman / Page bukan di Postingan.

    Indetitas Situs dengan Laman Page di Blogger

    Mendaftar Google Adsense

    Setelah melakukan 2 langkah-langkah yang ada di atas berikut ini ada ceklist yang harus kamu pastikan sebelum mendaftar Program Googel Adsense :

    1. Templete sudah valid HTML 5 cek di validator.w3.org
    2. Terdaftar pada Google webmaster dan kirim sitemap .xml
    3. Hubungkan dengan google analitik
    4. Terdapat minimal 10 artikel dengan jumlah kata lebih 500 kata
    5. Tidak ada link mati / error 404
    6. Navigasi Artikel berjalan baik
    7. Identitas situs lengkap dan tampil di setiap laman

    Catatan :

    Jika semua ceklist tersebut terpenuhi, saatnya untuk mendaftar google adsense. Kamu bisa daftar google adsense melalui Dashboard kamu di https://www.google.com/adsense/ atau melalui dashboard blogger :

    Daftar Google Adsense melalui Dashboard

    Silahkan ikut petunjuk yang ada di Google Adsense. Jangan lupa untuk simpan Googel Adsense Publisher Id di Head Templete blogger kamu untuk memudahkan proses verifikasi.

    Jika sudah, silahkan menunggu hasil verifikasi dari tim Google Adsense. Biasanya akan ada pemberitahuan jika website kamu gagal atau lulus paling cepat 3 hari paling lama 14 hari setelah mengajukan daftar program.

    Penting !!! – Selama proses review Google Adsense ada baiknya kamu mem-posting satu artikel setiap hari minimal 300 kata. Ini berdasarkan pengelaman saja sih

  • Google Adsense – Memilih Niche Website

    Google Adsense – Memilih Niche Website

    Matamu.NET – Sebelum membuat website, ada baiknya kita memulai dengan memilih Niche (ceruk pasar) website. Sederhanya, Niche itu berbicara tentang topik utama dari website yang kamu buat. Misalnya Niche Tenokologi, itu artinya situs kamu membahas mengenai seputar gadget, Computer, Laptop, Kamera dan sejenisnya.

    Niche itu menentukan iklan yang tayang di website. Misalnya website kamu adalah website dengan Niche Wisata maka besar kemungkinkan iklan yang tayang adalah iklan hotel, tiket dan hal-hal yang berkaitan dengan perjalanan.

    Uniknya, Iklan-iklan dengan niche tertentu memiliki nilai CPC yang tinggi sehingga sedikit klik saja akan membuat kamu mendapatkan banyak earning.

    Berikut ini urutan Niche Webiste dengan nilai CPC tertinggi di Google Adsense

    Bahasa Inggris

    1. Insurance
    2. Loans
    3. Mortgage
    4. Attorney
    5. Credit
    6. Lawyer
    7. Donate
    8. Deegre
    9. Hosting
    10. Claim

    Bahasa Indonesia

    1. Keuangan
    2. Trading
    3. Home Desain
    4. Wisata
    5. Kesehatan
    6. Tekno
    7. Game
    8. Pendidikan
    9. Berita
    10. Hiburan / Enterteinment

    Pertingan kasarnya seperti ini :

    1. Misalkan CPC Niche Keuangan Rp 1.500 dan Niche Pendidikan Rp. 200.
    2. 10 klik di situs keuangan setara dengan 15.000 rupiah sedangkan di Niche pendidikan sebesar 2.000 rupiah
    Hasil Screenshoot Analisis CPC Website dengan Semrush

    Pertimbangan Memilih Niche

    Kalau bisa memilih Niche yang lebih tinggi kenapa harus yang rendah secara potensi penghasilan lebih besar!

    Memang pernyataan ini tidak ada salahnya dan logis namun misalnya saja kamu mulai membahas tentang keuangan tapi tenyata kamu sekali tidak menegerti tentang keuangan, maka kemungkinan artikel-artikel yang kamu terbitkan akan sulit dipahami oleh pembaca.

    Kamu hanya menerbitkan artikel hasil re-write murni tanpa ada tambahan atau ide yang datang dari pengetahuan kamu sendiri. Dalam kasus ini menulis 20 sampai 30 artikel mungkin belum menjadi masalah, tapi untuk perkembangan website kamu hal ini bakalan menyusahkan.

    Selain itu dimana ada gula di stu akan banyak semut bro. Semua orang yang punya modal besar akan berpikir hal yang sama sehingga Situs-Stius dengan Niche tinggi bakalan diisi sama sesepuh SEO atau perusahaan dengan modal besar.

    Tips saya sih, buatlah Niche yang paling dekat kehidupan kamu sehingga kamu bisa menikmati setiap artikel yang kamu terbitkan. Kejar prestasi saja terlebih dahulu, Uang hanyalah Reward yang kamu dapatkan setelah berprestasi.

    Blog Gado-Gado

    Selain dari Niche tunggal beberapa Blog juga bisa memungkinan dibuat dengan banyak Niche alias Blog Gado-gado. Blog gado-gado ini jauh lebih nyaman sih sebenarnya dimiliki karena kita bisa dengan bebas membuat artikel sesuai dengan mood kita sehingga bakal akan ada banyak artikel yang bisa kita terbitkan.

    Begitu ketemu ide, kita bakalan bahas ide tersebut. Begitu ada yang trend kita akan bahas yang trend tersebut.

    Tapi ada dua kekurangan dari Blog Gado-Gado.

    Pertama – Google menganggap blog ini tidak ditulis secara profesional karena ditulis bukan oleh orang yang punya kompetensi khusus.

    Kedua – nilai CPC nya sangat kecil karena iklan yang muncul bisa random

    Saya sendiri memulai website saya dengan Niche Gado-gado pada tahun 2014 yang lalu. Dan tidak sampai satu tahun sudah ada 800 artikel yang terbit yang artinya sehari saya bisa terbitkan 2 artikel. Penghasilannya juga lumayan cuman jika dibanidngkan dengan teman yang punya Website dengan Niche tunggal hasilnya jauh lebih besar sih. padahal jumlah pengunjung sama.

    Semi Wallpaper

    Selain Niche tungal, sebenarnya jenis website bisa dilihat berdasarkan kecedenrungan menampilkan kontent. Pada umumnya Jenis Webiste tersebut adalah :

    1. Blog Wallpaper – isinya hanya gambar-gambar saja buat didownload dan dijadikan wallpaper
    2. Blog Semi Wallpaper – Isinya gambar-gambar dengan penjelasan singkat (100 sampai 200 kata) mengenai gambar tersebut
    3. Blog Donwload – Blog yang isinya link download film, software, templete dan sejenisnya.

    Sayangnya google sangat membeci dua jenis Blog di atas karena rentang dengan pelanggaran hak Cipta. Sampai hari ini yang masih banyak rekomendasikan adalah Blog Semi Wallpaper dimana Setiap Gambar yang kamu unggah akan dijelaskan dengan keterangan yang teridiri dari 100 sampai 200 kata.

    Keterangan inilah yang membuat content kamu bisa terhindar dari plagiasi jika hanya berisi gambar yang kita sendiri ambil dari internet.

  • Belajar HTML – Membuat Heading dan Paragraf

    Belajar HTML – Membuat Heading dan Paragraf

    Matamu.NET – Dalam menyajikan konten yang lebih rapi, HTML menyediakan tag Heading <h> dan Paragraf <p>. Tujuannya agar search enggine bisa membedakan antara judul dan isi dari konten yang ingin diberikan.

    A. Heading

    Heading adalah penanda yang dimulai dengan tag <h> dan ditutup </h>. Heading secara harfiah berfungsi untuk memberikan judul postingan, bukan tittle untuk judul website. Selain dari judul heading juga bisa digunakan untuk menunjukkan sub judul dengan tingkatan heading yang lebih rendah.

    Penulisan Heading dimulai dari <h1> sampai dengan yang terkecil adalah <h6>.

    contoh penggunaan Heading di HTML

    Catatan : Heading memiliki peran penting bagi Search enggine untuk mendeteksi garis besar dari pembahasan yang ditampilkan dipostingan blog. Semakin rapi cara menuliskan heading semakin baik skore SEO dari aspek heading.

    Sebagai Contoh Struktur Penulisan Heading yang SEO Friendly :

    1. H2 A (Topik-Topik yang Dibahas)
      1. H3 A1 (Sub-Topik A1)
      2. H3 A2 (Sub-Topik A2)
    2. H2 B
    3. H2 C
      1. H3 C1 (Sub-topik C1)
        1. H4 C1A (Sub Sub-topik C1A)
        2. H4 C1B (Sub Sub-topik C1B)
      2. H3 C2 (Sub-topik C2

    Menambahkan Style pada heading

    Karena heading merupakan tag dari html, maka heading juga bisa diberikan attribute seperti style. Tujuannya untuk mengubah ukuran misalnya atau merubah warnanya.

    Ukuran Heading dengan menggunakan HTML

    B. Paragraf

    Paragraf pada html selalu ditulis dalam bentuk satu blog, meskipun metode penulisanya bisa banyak misalnya menggunakan tag div, tapi agar lebih mudah dikenal oleh search enggine sebagai content dengan tipe paragraf maka sebaiknya menggunakan tag p.

    Cara membuat tampilan yang keren buat paragraf dengan tag P dan div

    Dalam pembuatan paragraf di html, penulis code tidak akan pernah bisa memastikan tampilan yang akan muncul, karena hal ini bergantung dari jenis perangkat yang digunakan.

    Prinsip pengaturan paragfraf menggunakan prinsip penambahan inline css atau attribusi, namun pada umumnya editor cms sudah menyedikan tombol klik untuk mengubah style paragraf tanpa harus mengedit html.

    Akan sebagai conoth editing style dari paragram sebagai berikut :

    Cara membuat inline ccs pada paragraf

    Catatan : Sekalipun dalam code html, spase tidak dianggap sebagai perintah, namun dalam paragraf, spasi akan ditayangkan, sedangkan enter tidak akan ditayangkan. Cara menampilkan enter bisa dilakukan dengan paragraf baru atau lline break dengan tag <br/>

  • Belajar HTML – Tag, Elemen dan Attribute dalam HTML

    Belajar HTML – Tag, Elemen dan Attribute dalam HTML

    Matamu.NET – Pada saat belajar HTML ada tiga aspek yang penting untuk diperhatikan sebagai informasi dasar penyusunan code HTML. Tiga aspek adalah Tag, Element, dan Atribute.

    1. Tag

    Tag adalah text yang berfungsi sebagai penanda khusus (markup) yang memiliki fungsi untuk dijalankan. Misalnya tag <p> ini menjadi penandai bahwa setelah tanda ini akan ada kalimat yang terususn dalam bentuk paragraf. Tag memiliki syntak pembuka <tagName> dan penutup dengan tanda garis miring </tagName>.

    Contoh-contoh tag umum dalam html adalah <html>, <body>, <p>, <div>, dan sejenisnya. Contoh penggunaan tag seperti berikut L:

    <h2> Latihan HTML </h2>
<p> Disini adalah contoh penggunaan tag P dalam membuat paragfraf di HTML </P>

    Pada awal dikembangkan di HTML 1.0, html hanya mengenal 18 tag, namun pada saat ini di HTML 5.2, sudah terdapat lebih dari 250 tag.

    Tag disusun dengan tipe nested (bersarang) yakni :

    <p><b><u>Contoh penulisan tag HTML yang benar </u></b></p>

    Penulisan seperti ini dianggap salah pada struktur tag html.

    <p><b><u>Contoh penulisan tag HTML yang salah </p></b></u>
    Contoh Penggunaan TAG di HTML

    2. Elemen

    Elemen adalah semua yang diletakkan di awal pembuka tag sampai penutup tag. 

    <tagName> <tagName2> isi tag ini adalah bagian dari element </tagName2> </tagName>

    Elemen terkadang juga disebut sebagai node. Element digunakan untuk menyusun komponen-komponen document html. Node dalam html terbagi ke dalam tiga jenis :

    1. node elemen
    2. node atribut
    3. node tesk

    Elemen adalah satu kesatuan dari dari tag pembuka, isi tag dan penutup tag. Konsep dari elemen adalah bentuk yang tampilkan pada laman webpage ketika document html.

    3. Attribute

    Atribute adalah modifier yang memberikan informasi tambahan dari sebuah elemen. Posisinya diletakkan pada bagian tag pembuka sebelum tanda “>”. Penulisan attribute selslaui ditulis dalam bentuk nameattribute=”value”

    <p>Ini adalah contoh penggunaan atribusi</p>

    Setelah diberikan atribute style sseperti contoh berikut ini!

    <p style="color:red; font-family:sans-serif; font-size:22pt;">Ini adalah contoh penggunaan atribusi</p>
    perbedaan antara tag attribusi dan elemen html

    Perbedaanya dapat dilihat pada compiler html berikut ini

    Contoh pembuatan compiler HTML dengan css

    Attribute terbagi ke dalam tiga jenis atribut :

    1. Atribute Global – Atribut yang dapat ditambahkan pada semua html
    2. Atribute Event – Atribut yang ditambahkan sebagai bentuk aksi terhadap sebuah element. Atribut ini banyak digunakan pada penggunaan script tambahan seperti javascript.
    3. Atribute Khusus – Atribut yang hanya bisa dipakai dengan tag yang khusus dan tidak bisa pada tag lain.

    Contoh dari atribut khusus :

    atributetag pengguna
    src<a>, <img>, <audio> <video> dll.
    href<a> <link>
    action<form>
    autoplay<audio> <video>

    Catatan : Atribute ditulis dengan huruf kecil dengan nilai yang atribusi diketikan diantara tanda petik “…”

  • Belajar HTML – Struktur Dasar Document HTML

    Belajar HTML – Struktur Dasar Document HTML

    Matamu.NET – Sebenarnya tidak ada struktur dasar dalam pengembangan document HTML tapi ada pola-pola yang sering digunakan secara umum sehingga pola-pola ini selanjutnya disebut sebagai struktur dasar.

    Document HTML secara default harus memiliki

    1. Pembuka document dalam bentuk tag deklrasi <!DOCTYPE html>
    2. Document html akan dibuka dengan tag <html> dan ditutup dengan tag </html>
    3. Bagian yang dilihat oleh client saat diterbitakan diletakkan pada bagian <body> … </body>

    secara umum struuktur document html dituliskan dalam bentuk :

    1. Declaration
    2. Head
    3. Body

    Contoh penulisan :

    <!DOCTYPE html>
<html>
<head>
     <title>Tutorial Paragraf di HTML #3</title>
</head>

<body>
     <h1>Judul Tulisan</h1>
     <p>Paragraf diletakkan di tag P atau bis adalam bentuk tag div</p>
</body>
</html>

    contoh view dari document :

    Contoh pembuatan dokumen html

    1. Deklarasi

    Bagian deklarasi memberikan jenis document html yang dibuat. Meskipun bisa dibuat tanpa bagian declarasi, namun document yang disusun dianggap tidak valid oleh W3C.

    Tag deklarasi pembuka document hanya dituliskan sekali di setiap document. Tag ini tidak sensitive case seperti pada umumnya code html. 

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML</title>
    </head>
    <body>
        <p>Hello World!</p> 
    </body>
</html>

    Jika kita menghilangkan tag <!DOCTYPE html>, dokumen ini masih menampilkan laman yang sama dengan <!DOCTYPE html>.

    Pada contoh tag deklarasi yang digunakan dibagian atas menggunakna dari HTML 5.0 itu <!DOCTYPE html>. Setiap versi HTML berbeda-beda seperti pada HTML 4.0 dideklrasikan dengan tag

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Setelah tag deklarasi, selanjutnya adalah tag html yang dibuka dengan <html> dan ditutup </html>

    <html lang="en">

    Tag ini adalah tag wajib karena menjadi ruang kita menuangkan tag-tag dan code-code dalam membuat document HTML.

    Dalam tag ini terdapat atribut yang menunjukkan lang=”en” yang berarti tulisan dalam documen ini dalam bahasa inggris. Memang sih isi dari documennya tetpa bis adiisi dengan bahasa lain selain bahasa inggris, tapi atribute ini memudahkan browser untuk memberikan referensi bahasa kepada user jika diakses online.

    Conothnya biasanya ketika kita mengakses artikel bahasa Inggris dari Indonesia maka akan ada informasi jika laman ini menggunakan bahasa Inggris, apakah anda ingin mengubahnya ke bahasa Indonesia?

    2. Head

    Bagian Head dimulai dengan tag <head> dan ditutup dengan </head>

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML</title>
    </head>
    <body>
        <p>Hello World!</p> 
    </body>
</html>

    Bagian yang di Bold adalah tag Head. Bagian ini berisi informasi yang tidak akan ditampilkan di laman pada saat document diterbitkan, namun tetap ikut diloading oleh browser.

    Karena tidak muncul terkadang orang-orang menyebutnya sebagai meta data. Fungsi dari tag ini adalah :

    1. Tempat menaruh meta tag yang membuat webiste lain bisa melacak situs kita. Biasanya untuk kebutuhan SEO
    2. Menempaykan tah title untuk judul website
    3. tempat menuliskan css, javascript, character set, script dan sejenisnya
    4. dan lain-lain

    Secara umum bagian Head ini dugunakan untuk mengatur style element secara umum seperti jenis huruf yang digunakan, ukuran, warna background, ukuran kotak box dan sejenisnya :

    <style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

    Contoh penggunaan sebagai berikut :

    contoh penggunaan CSS dan Style di Head

    Head juga berisi metadata yang berisi elemen-elemnt meta yang mengatur penampilan documen secara umum. Adapun contoh-conoth meta element :

    Character Set :

    <meta charset="UTF-8">

    Penanda Keyword untuk Serach Enggine (SEO)

    <meta name="keywords" content="HTML, CSS, JavaScript">

    merefres documen setiap 1 menit

    <meta http-equiv="refresh" content="60">

    3. Body

    Pada bagian Body <body>…</body> adalah bagian yang ditampilkan di web browser atau sebut saja sisi sebagai bagian View. Baik code Head dan Body sebenarnya dua-duanya di loading dari sisi Client.

    <body>
     <p>Hello World!</p> 
</body>

    Di bagian body ini, web developer memiliki tugas menata posisi, style, ukuran, dan seluruh hal yang berkaitan dengan User Interface di daerah body. Tag-tag yang disarankan bisa dalam bentuk paragraf <p>…</p> atau tag divisi <div>…</div>

  • Perbedaan Antara HTTP dengan HTTPS

    Perbedaan Antara HTTP dengan HTTPS

    Matamu.NET – HTTP adalah singkatan dari HyperText Transfer Protocol. HTTP adalah salah satu jenis protocol transfer yang dirancang untuk penggunaan Hypermedia yang dilayani oleh HTML. HTTP ini merupakan bentuk komunikasi data protocol World Wide Web (WWW) pada dokumen HTML yang menyertakan hyperlink ke sumber daya lain. Tujuan agar komunikasi data lebih mudah diakses antara server dan client.

    HTTP memiliki peran sebagai pengatur action yang dilakukan oleh user selama berada di website, seperti mengerakkan mouse, mengklik link, melakukan scroll, memasukkan informasi dan sejenisnya.

    Saat ini ketika banyak berseliwerang orang-orang jahat di dunia maya, protocol HTTP dianggap masih terlalu “Naked”. Maksudnya adalah protocol tidak menyediakan keamaanan yang terenkripsi sehingga pengiriman data client ke server bisa dengan mudah diamati oleh orang lain.

    Hal ini tentu saja bisa berbahaya jika kita melakukan transkasi data penting seperti login ke akun Paypal atau internet Banking. Data masukan akan dengan mudah diakses oleh pihak ketiga yang mungkin saja tidak bertanggung jawab.

    Sebagai informasi, hampir semua website yang kita akses selalu melibatkan pihak ketiga dalam mendukung infrastruktur website. Jumlahnya lebih dari satu dan bisa jadi sampai puluhan tergantung dari seberapa banyak layanan yang digunakan dari website yang client kunjungi.

    HTTPS

    Agar informasi yang dikirim oleh client ke server, atau ke server pihak ketiga yang disetujui oleh server awal tetap terjaga selama proses browsing, maka dibuat sistem enkripsi untuk mejamin data yang dikirim lebih sulit ditranslate oleh pihak yang tidak dilibatkan dalam pertukaran data. Mudahnya hacker akan mendapatkan tambahan kesulitan dalam upaya mencuri data pribadi kalian.

    Proses enskripsi selanjutnay dimasukkan ke dalam blok server baru sebagai layer dari enskripsi ke HTTP. Hal ini yang membuat HTTP lebih aman (secure) untuk dijadikan tempat perutakaran informasi. Sistemnya diadopsi dalam pemberian nama dalam bentuk HTTPS, dimana S adalah singkatan dari secured.

    Proses peng-enkripsi-an ini dilakukan berdasarkan sistem Secure Socket Layer atau Transport Layer Security sebagai layanan. Code encrpisi ini dimasukkan sebagai sertifikat dari SSL sehingga sertificat ini yang nantinya akan ditunjukkan kepada Client sebagai informasi sistem enkrispi dari website yang sedang dikunjungi. Semakin panjang dan rumit proses enskripsi yang dilakukan maka semakin aman pula situsnya.

    Jika pemilik website merasa kemampuan eknripsi mereka membuat SSL sulit dilakukan atau kurang trusthed, banyak penyedia jasa penyewaan Sertifikat SSL baik gratisan dan berbaya. Untuk yang berbayar, tentunya harganya mewakilik jumlah enksripsnya.

    Contoh jasa pembuat Sertificat SSL yang ada di NameCheap.

    Sertifikat Enkripsi SSL

    Misalkan situs matamu.Net yang sedang anda baca ini, jika dilihat di slot URL terdapat lambang gembok yang menunjukkan bahwa Situs ini telah mengenkripsi informasi anda alias sudah aman.

    Sertifikat SSL Matamu net untuk Protocol HTTPS

    Jadi anda tidak perlu lagu untuk berselancar di Situs Matamu.net ini karena semua aktifitas tidak bisa diterjemhakan langsung dan butuh enkripsi yang saya sebagi pemilik situs sendiri tidak bisa menerjemahkannya.

  • Cara Membuat Website Fotografi Gratis Tapi Keren dan Profesional

    Cara Membuat Website Fotografi Gratis Tapi Keren dan Profesional

    Matamu.NET – Bagaimana karya seorang fotografer dapat diakui atau ditunjukkan ke orang lain? Pada zaman dahulu tentu saja melalui sebuah pameran yang biayanya tidaklah sedikit dengan waktu pamer yang terbatas. Saat ini semuanya bisa dilakukan jauh lebih praktis dengan website fotografi. Dengan website tersebut, kamu bisa menunjukkan foto-foto terbaik kamu dalam bentuk portofolio yang menarik.

    Lantas mengapa sih harus membuat website fotografi?
    Kan ada Instagram yang sudah jauh lebih stabil dan gratis pula. Selain itu memang platform-nya dirancang untuk display foto.

    Yup Instagram memang sudah menjadi media yang wajib dimiliki seorang fotografer masa kini. Tanpa Instagram seorang fotografer itu ibarat sayur tanpa garam.

    Tapi, sekalipun Instagram keren dijadikan sebagai media portofolio, Applikasi Sosial media ini memiliki banyak kekurangan untuk digunakan dalam jualan jasa fotografi. Kekurangannya adalah :

    1. Sulit dalam navigasi foto sesaui dengan label.
    2. Sulit menggiring pengunjung untuk melakukan transaksi karena hanya menyediakan kolom penjelasna di Deskripsi diri.
    3. Calon penggunan jasa sulit menemukanmu karena algoritma Instagram mengharuskan kamu menggunakan jasa FB adsense untuk menjangkau lebih banyak pengunjung.

    Jadi memang harus membuat Website sendiri deh kayaknya, biar terlihat lebih profesional.

    Dalam artikel ini saya akan menjelaskan dua cara membuat website fotografi profesional yakni cara pertama dengan hosting gratisan dan self hosting berbayar. Namun sebelumnya mari kita mulai dengan memilih nama Website.

    1. Memilih nama Website

    Hampir sama dengan tata cara membuat webiste yang lain, nama website itu penting. Jangan pernah percaya pepatah “apalah arti dari sebuah nama”, karena arti dari sebuah nama Website bisa jadi segalanya.

    Nama akan membawa kesan yang baik dan membuat website kamu jadi lebih mudah disebutkan. Misalnya saja nama website ini adalah matamu.NET, itu memiliki tujuan tertentu loh.

    Misalnya kamu ingin berbagai artikel atau penjelasan dengan orang lain, kata Matamu akan jadi lebih cepat diingat oleh pengunjung.

    “Kamua lihat dari mana sumbernya?”
    “dari matamu”

    Gimana? asikkan? Coba bayankan kalau nama website kamu situsfotografiprofesional.com. Masak sih, kamu mau jawab dari situsfotografiprofesional.com. Boro-boro jawab, nama situsnya saja sudah lupa.

    Jadi usahakan nama situs itu kamu itu enak disebut, mungkin terdiri dari 2 atau 3 suku kata, Seperti Facebook.com (dibaca: Fesbuk) atau tribun.

    Jika tidak ketemu dengan ide namanya, mungkin ada baiknya kamu menggunakan nama kamu, jadi sekalian branding Image. Situs saya sendiri, selain matamu.NET ada juga Ahmaddahlan.NET.

    2. Memilih Jenis Website

    Karena kita akan membuat Website fotografi dengan tujuan media protofolio, maka kita tidak perlu lagi pusing memilih jenis website. Kita langsung saja memilih Jenis Webiste CMS, sisanya kita akan memilih Platform CMS yang digunakan.

    Dalam artikel ini saya akan memberikan dua contoh pilihan, yang pertama adalah Platform Blogger.com untuk Website Gratisan dan yang kedua adalah WordPress Self Hosted untuk website berbayar.

    3. Cara Membuat Webiste

    Berikutnya adalah langkah mengembangkan website, kita mulai dari yang gratisan yah.

    a. Membuat Website Fotografi dengan Blogger

    Loh katanya Profesional, kok malah kasih saran Blogspot sih?

    Jangan salah, sekalipun gratisan dan sangat mudah dibuat, Blogger itu bisa tampil profesional loh. Hal ini tergantung dari templete yang kamu pasang. Disisi lain kamu tidak perlu jago-jago amat dalam hal coding, cukup download templete gratisan dari penyedia jasa templete seperti Gooyabi atau Sora Templete, lalu pasang dan selesai.

    Cuplikan Templete yang di desain dengan Blogger

    Jadi idenya adalah hanyalah cara memilih templete.

    Untuk membuat Website dengan CMS blog, berikut ini langkahnya

    1. Loggin di Akun Gmail pada Browser yang sedang digunakan
    2. Masuk ke Blogger.COM, pada laman awal anda akan diminta membuat akun, cukup klik buat akun.
    3. Pilih menuh tambah blog baru
    4. Masukkan nama Blog
    5. Masukkan Domain URL dalam bentuk namadomainkamu.Blogspot.com
    6. Selesai.

    Memasang Templete Blogger

    Setelah melakukan langkah lima, maka blog kamu sudah mengudara jika domain yang kamu pilih unik atau tidak ada kesamaan dengan subdomain blogspot orang lain. Selanjutnya agar terlihat lebih cantik, silahkan pasang templet yang sesuai dengan kebutuhan fotografi.

    Adapun langkah memasang templete sebagai berikut :

    1. Download templete yang akan dipasang, sebagai conoth silahkan masuk ke Sora Templete atau Goyabi.
    2. Unzip templete dan perhatikan file text yang berkekstensi .xml.
    3. Masuk ke blog anda, cari menu Tema >> Sesuaikan.
    4. Setelh itu muncul pop up silahkan upload file .xml dari templete yang sudah diambil.
    5. Jika file sudah berhasil di uplaod, seilahkan di simpan.

    Mengalihkan ke Domain TLD

    Pada saat membuat Blog di blogger.com kamu secara default akan mendapatkan subdomian dari Blogpsot.com seperti namadoaminkamu.blogspot.com.

    Tentu saja hal ini terlihat kurang profesional bagi kebanyakan orang. Untungnya Blogger mengizinkan kamu untuk meredirect domain TLD kamu ke domian kamu, namun tentu kamu harus membeli domain dulu di penyedia jasa domain.

    Jika kamu sudah memiliki Domain TLD, misalnya namadomainkamu.com, kamu bisa memasangnya di Blog dengan cara :

    1. Masuk ke Dashboard blogger.com lalu menuju ke setelan
    2. Cari menu domain costum lali klik menu tersebut.
    3. ketikkan nama domain kamu dilengkapi dengan www.domainkamu.com
    4. Pilih simpan, pada saat memilih simpan akan muncul informasi yang harus kamu masukkan ke dalam DNS setting di tempat kamu membeli domain.
    5. Silahkan Logging ke penyedia jasa domain kamu lalu masuk ke settingan DNS.
    6. Buat record CName baru dengan nama : WWW dan tujuan : ghs.google.com, setelah itu simpan
    7. Buat Record CName baru lagu dengan nama : g3jv3hunc5pp dan Tujuan : gv-py6omh5lhcj4ip.dv.googlehosted.com, Setelah itu simpan. Untuk informasi yang bold itu bergantung dari BLog kamu dan ini unik atau berbeda antara satu blog dengan blog lainnya.
    8. Silahkan kembali ke Settingan Blogger lalu simpan perintah redirect kamu
    Cara redirect Domain ke Blogger

    Jika sudah berhasil menyimpan informasi tersebut di settingan DNS kamu, maka tunggu sampai Domain tersebut dipropagasi ke Blog kamu. Rentang waktu tunggunya 2 x 24 jam, namun kalau penyedia domain kamu handal biasanya cukup menunggu 15 menit.

    Setalah itu, blog kamu sudah diakses dengan domain www.namadomainkamu.com bukan lagi namadomainkamu.blogpsot.com. Jadi terlihat pebih profesional kan?

    b. Membuat website fotografi dengan WordPress Self-hosting

    Secara umum wordpress terbagi ke dalam dua jenis yakni WordPress.com yang layanan mirip blogger dimana pemilik webiste tetap menginduk di hostingan wordpress.com. Yang kedua adalah adalah wordpress.org dimana kamu akan menyimpan seluruh data website kamu server yang kamu sewa/miliki sendiri.

    Tentu saja ini jauh lebih mahal karena dibebankan biaya jasa sewa Server. Jasa sewa server sendiri berbeda-beda satu dengan yang lainnya, tergatung dari jenisnya. Misalnya Shared Hosting itu biasanya bisa disewa dengan biaya 100 ribu sampai dengan 500 ribu pertahun sedangkan untuk VPS biasanya disewakan 5 $ sampai 20 $ sebulan.

    Keuntungan dari WP self hosting ini tentu saja jauh lebih banyak dibandingkan dengan blogger, tapi butuh waktu dan uang yang besar untuk proses maintenance website kamu. Kalau penghasilan kamu dari fotografi sudah besar sih sepertinya tidak ada masalah.

    Tidak perlu panjang mari kita mulai tutorial ini dengan asumsikan kita menginstall WP dengan aplikasi, jadi jauh lebih mudah. Adapun caranya sebagai berikut :

    1. Logging di Akun Server kamu, pilih menu Instan Wordporess baik pada VPS maupun Shared Hosting
    2. Tunggu sampai proses instal selesai.
    3. Setelah proses instal selesai kamu akan diminta untuk mebuat akun administrastor dan membuat Sandi.
    4. Website kamu sudah mengudara.

    Memasang Templete WordPress

    Untuk memasang Templete WordPress tidak jauh berbeda dengan blogger, kamu cukup milih templet bawaan dari WordPress atau memilih dari WordPress.org. Jika kamu merasa kurang suka dengan templet yang ada disana, kamu bisa mencoba membeli dri penyedia jasa templet seperti di ThemeForest atau envato.

    Jika sudah membeli kamu akan diberi file Zip, file ini tidak usah dibongkar seperti pada blogger. Biarkan aplikasi WordPress yang mebongkarnya, kamu cukup melakukan langkah berikut :

    1. Masuk ke WordPress kamu dengan cara IP/wp-admin (jika sidah ada domainnya, domainkamu.com/wp-admin
    2. Pilih menu Templete, lalu pilih upload file.
    3. Pilih file Zip yang sudah kamu beli, lalu tunggu sampai selesai.

    Catatan : FIle Templete di WordPress itu sudah berada pada level PHP, sehingga jangan pernah mengupload file dari sumber tidak terpercaya seperti dari situs tidak dikenal. Hal ini bis amenjadi celah bagi hacker untuk memasukkan script inject untuk menghack situs kamu.

    Redirect Domain

    Untuk redirect doamin di WP Self Hosting kamu hanya perlu mengarahlan DNS kamu ke NS server tempat kamu memesan server. Sebagai contoh di VULTR kamu cukup mengarahkan NS1.vultr.com dan NS2.vultr.com

    Akhir Kata

    Jika sudah sudah selesai nah sekarang tugas kamu adalah mengelola konten dengan membuat postingan dari foto-foto yang ingin kamu jadikan portofolio.

  • Membuat Laman Statis Website Sederhana dengan HTML dan CSS

    Membuat Laman Statis Website Sederhana dengan HTML dan CSS

    Matamu.NET – Membuat Website bisa dilakukan dengan mudah menggunakan text editor loh. Text Editor sudah disiapkan oleh OS secara default seperti Note, NotePad ++ dan sejenisnya.

    Ide-nya sederhana hanya dengan merancang tampilan menggunakan Bahasa Hyper Text Mark-up Language (HTML), ditambah dengan CSS, website kamu bisa jadi semakin keren.

    Setelah membuat Website dengan Text Editor, File tersebut selanjutnya dijalankan di Aplikasi Browser seperti Google Chrome atau Microsoft Edge.

    Logo dan Icon Microsoft Edge

    A. Struktur Dasar Document HTML

    Sebenarnya tidak ada format khusus dari Document HTML karena proses pembacaan isi document dilakukan secara tertsrtuktur dari line paling atas ke bawah. Tampilan yang muncul secara default di load dari atas ke bawah.

    Namun pengembang Document HTML biasanya membuat struktur yang baku sehingga bisa dengan mudah diedit oleh pengembang lain dalam tim atau diluar tim.

    Struktunya paling umum dibangun dari dua bagian yakni Head dan Body. Bagian Head berisi Code dasar dan CSS sedangkan dibagian Body adlaha elemen yang ingin di tampilkan.

    Strukutr Documen standar seperti contoh di bawah ini!

    <!DOCTYPE html>
<html>
<head>
    <title>Membuat Web dengan HTML dan CSS - matamu.net</title> 
</head> 

<body> 
    <!--Elemen yang ditampilkan di halaman browser -->
</body>
</html>

    Ciri HTML itu adalah penanda yang disebut Tag, setiap taks berisi sintaks yang unik, dan tag dituliskan di dalam kurung siku <head>, tag ini kemudian ditutup dengan </head>. Pada bagian pembuka ada sntak unik <!DOCTYPE html> yang merupakan Sintaks Default pembuka dokumen yang menunjukkan jenis code HTML ynag digunakan.

    Pada situs matamu.net ini berisi tag pembuka :

    <!DOCTYPE html>
<html lang="id-ID">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

    Struktur ini kemudian dikembangkan dengan banyak struktur yang secara umum dibuat kedalam struktur lebih kompleks seperti berikut :

    tampilannya dalam browser biasanya dibagi dalam bentuk :

    untuk lebih lanjut silahkan kunjungi artikel : Desain Templet Website

    B. Cara Membuat Website Dengan Text Editor dan HTML

    Agar lebih memahami sebaiknya sambil membaca artikel ini silahkan lakukan tahapan berikut :

    1. buka Text Editor
    2. Copy Paste code HTML ke dalam tetxt editor
    3. Save dengan extensi .html
    4. Buka dengan

    1. Membuat Laman Website Statis Biodata Diri

    <h1>Biodata Pribadi</h1>
<p>
Nama : Ahmad Dahlan </br>
Hobi : Buat Tutorial Coding yang Sesat </br>
Kata Mutiara </br>
“Don’t judge a book by its cover”
</p>

    Setelah, dipastikan, Silahkan Save lalu buka file tersebut dengan browser, jika berhasil tampilan akan seperti ini !

    Cara Membuat Webiste dengan Code HTML

    2. Memberi Style

    Setelah melakukan langkah pada pada point 1, kita hanya menemukan laman statis dengan tampilan sederhan yakni jenis huruf yang standar sesaui bawaan Browser, warna hitam dan membosanka tentunya.

    Kita bisa membuat tampilan menjadi sedikit lebh menarik dengan memberikan sentuhan seperti warna, ukuran huruf, jenis hurus dan sejeninya. Hal ini sedbut sebagai CSS atau Cascading Style Sheets.

    Langkahnya sebagai Berikut :

    <h1 style="text-align:center; color:red; font-family:sans-serif;">
Biodata Pribadi
</h1>

<p style="text-align:center; color:blue; font-family:serif;">
<b>Nama : Ahmad Dahlan</b> </br>
Hobi : Buat Tutorial Coding yang Sesat </br>
Kata Mutiara </br>
“Don’t judge a book by its cover, Judge it, by its prize”
</p>

    Setelah Save As dengan tipe file HTML maka akan tampil seperti di bawah :

    Compiler HTML dengan Inline CSS

    Pada kasus ini, Code HTML dilengkapi CSS dalam bentuk inline CSS. Metode adalah metode sederhana namun memakan banyak Soruce code, karena setiap kali ada Line baru yang dibuat maka kita harus mengentiikkan ulang setiap CSS yang ada.

    2. Membuat Struktur Document per Block

    Agar lebih hemat, CSS ini dibuat dalam bentuk grup yang disebut class. Calss selanjutnya disimpan di Head sebagai sumber, lalu dipanggil di Body setiap kali kita ingin menggunakan CSS tersebut kita sisa memanggil classnya.

    Adapaun contohnya seperti berikut :

    <!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    
<article>
<div class="konten">
<h3 style="color:red; font-family:sans-serif;">Dummy Text</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In neque enim, imperdiet a felis sed, mattis cursus dui. Pellentesque sed arcu sapien. Aliquam luctus velit in mauris interdum, sed tincidunt arcu tempus. Phasellus ut purus ac nisi rhoncus pretium quis pellentesque diam. Curabitur eleifend luctus justo non porta. Vivamus eu urna vitae sem gravida finibus. Pellentesque sit amet neque nec lectus aliquam dignissim eget ut mauris. Mauris nec dapibus sem, nec scelerisque augue. Donec accumsan nibh vel tellus dignissim feugiat. Sed a ultricies augue, sed pulvinar neque. Suspendisse finibus, leo vestibulum lobortis hendrerit, tellus diam consectetur lacus, ac pulvinar velit elit in nibh. Mauris viverra dolor id eros vulputate rhoncus. Vestibulum nec iaculis lacus. Donec sit amet dolor felis.</p>

<p style="color:blue; font-family:sans-serif;">Donec metus ipsum, dictum a ante vel, finibus molestie mi. Donec ut rhoncus ligula, eget dapibus leo. Duis malesuada mauris vitae quam finibus tincidunt. Curabitur rhoncus libero non velit vehicula gravida. Praesent lacus sapien, faucibus et eleifend eleifend, tempor at lacus. Vestibulum blandit tincidunt quam, ut ultricies felis ultrices vel. Ut viverra feugiat dapibus. Quisque hendrerit vehicula nibh at elementum. Praesent ut scelerisque lacus. </p>

<p>Donec sit amet vulputate nulla. Nam mauris dolor, elementum vel vulputate ut, malesuada in ex. Ut vestibulum lobortis fringilla. Suspendisse tincidunt, velit non malesuada ultricies, ipsum justo viverra ligula, sed posuere nibh quam vel tortor. Vestibulum porta lacus magna, at interdum erat auctor nec. Aliquam in neque quis orci ornare tincidunt. Nam fermentum dictum tortor, sed gravida risus sagittis quis. Nulla non convallis elit. Nunc faucibus lectus vitae ipsum laoreet, et laoreet eros pellentesque. Nam condimentum cursus arcu, eget egestas massa pharetra sed. Integer facilisis neque quis sodales sagittis. Duis erat purus, aliquet quis tincidunt quis, tincidunt quis nulla. </p>
</div>
</article>
  
       <footer>
            Copyright Matamu.NET
       </footer>
    </div>
</body>
</html>

    Silahkan Save lalu jalankan di Browser dan lihat perubahan yang terjadi.

  • Cara Membuat Website Gratisan dan Self-Hosting

    Cara Membuat Website Gratisan dan Self-Hosting

    Matamu.NET – Ingin membuat Website? Namun bingung mau mulai dari mana? Mungkin ada baiknya jika kamu menyimak dengan seksama artikel ini agar tidak salah dalam menentukan jenis website yang akan kamu pilih dan segera memulai membuat website.

    A. Apa Itu Website?

    Tak kenal maka tak sayang, mungkin ini adalah pepatah yang paling tepat untuk memulai belajar mengenai cara membuat website, jadi mari kita sepakati terlebih dahulu defenisi website.

    Website adalah satu atau lebih laman front-end berisi informasi yang ditayangkan kepada client. Agar bisa ditayangkan, website harus memiliki laman yang dapat diakses oleh umum. Laman paling sederhana digenerate dengan Bahasa HTML

    Tidak semua informasi yang ada di Server ditayangkan ke client, karena ada banyak hal tidak perlu untuk ditampilkan seperti Database website, Query Langueng dan sejenisnya. Client hanya membutuhkan informasi terkait konten yang mereka butuhkan.

    Bagian yang tidak perlu ditayangkan ini selanjutnya di sebut Back-End. Tingkat kerumitan Back-End dari sebuah server tergantung dari fasilitas yang disedaikan webiste itu sendiri.

    Contoh sederhana dari sebuah Webiste adalah Blog dari Blogger[dot]com. Bagian belakang dari blog yakni Dashboard Admin Blog tidak perlu ditayangkan karena Client hanya membutuhkan isi dari postingan blog yang ditayangkan di domainkamu.blogspot.com.

    Sekalipun masih sederhana, blog dengan platform Blogger.com atau WordPress.com sudah masuk kategori website karena sudah punya laman yang bisa ditayangkan ke Client. Hanya saja, dua Platform tersebut belum memberikan User/Admin mengakses bagian Back-End dari situs.

    Maklum karena keduanya masih gratisan.

    Jika kalian memiliki niat untuk membuat webiste dengan kontrol penuh dari sisi Back-End, maka Website Self Hosting adalah solusinya. Namun Self Hosting itu tidak gratis, alias berbayar.

    Misalkan kamu sedang makan di sebuah restoran, Meja makan, pelayanan dan makanan yang kamu dapatkan adalah sisi Front-end, sedangkan sisi Back-end restorannya adalah bagian dapur dan gudang suplai-nya.

    Dahlan

    B. Tujuan Membuat Website

    Setelah memahami defenisi website, maka langkah selanjutnya adalah menentukan tujuan pembuatan website. Sekalipun semua webiste pad abagian Fornt-End akan ditayangkan dalam bentuk HTML, akan tetapi jenis, layanan, aplikasi dari website sangat beragam.

    Misalkan Matamu.NET yang sedang kalian baca ini adalah website dengan Platform bebrasis cms WordPress karena layanan utama dari wensite ini adalah kontent dan informasinya. Sedangkan buat kita yang sedang belajar online di Website kampus itu memiliki platform yang sedbut LMS dengan layanan yang dibutuhkan dalam pembeljaran online.

    Jadi langkah yang penting dalam memilih paltform dari website adalah menentukan tujuan dari pembuatan webiste itu sendiri.

    Jenis Jenis CMS dan Platform Website

    Kembali ke tujuan pembuatan website, secara umum tujuan pembuatan website sebagai berikut :

    1. Landing Page Website / Jualan Jasa atau Singgel Prodak

    Landing Page Website adalah sebuah situs yang informasi yang ditayangkan berada pada satu laman saja.

    Ketika pengunjung mengunjungi web baik diarahkan dari instagram, facebook, iklan dan sejeninya, pengunjung akan diarahkan (Landing) pada satu laman (Page) yang berisi semua informasi yang ingin disampaikan.

    Pada umumnya penggunaan Website Landing Page ini berfungsi sebagai media penawaran barang dan jasa tunggal seperti jualan jasa Fotografi dan sejenisnya. Pengunjung tidak perlu pindah dari satu laman ke laman lain untuk informasi cukup men-scrol dari atas ke bawah.

    Pada bagian bawah terdapat kalimat clossing yang mengajak client untuk menggunakan jasa yang membeli produk. Meskipun digunakan untuk jualan, website landing Page masih terlalu sederhana untuk disebut sebagai Online Shop.

    2. Blog Website

    Blog website adalah website yang dibuat untuk menampilkan artikel-artikel kepada pembaca, tujuannya adalah sumber informasi dalam bentuk tulisan. Contoh Blog website ini adalah matamu.NET. Website ini dikembangkan dengan platform WordPress dengan self hosting.

    Portal berita adalah salah satu website berjenis Blog website selain itu Wikipedia juga bisa jadi contoh yang baik dari Blog Website meskipun wikipedia dikembangkan dengan platfrom wiki.

    Blog website menitik beratkan pada konten yang ada dalam blog sehingga Paltform yang digunakan dalam blog lebih dikenal dengan sebuat CMS (Content Management system). CMS ini membantu managemen dari website dengan memberikan navigasi berorientasi pada konten website.

    Contoh-contoh CMS yang popular digunakan adalah :

    1. Blogger.com
    2. WordPress.mom
    3. WordPress.org
    4. Wiki
    5. Joomla
    6. Drupal

    3. Website Aplikasi

    Website aplikasi adalah webiste yang dikembangkan dengan sistematika tertentu sehingga memiliki fitur sesuai dengan rancangan yang diinginkan oleh pengembang.

    Tidak perlu panjang lebar, mari kita ambil contoh website Travel seperti traveloka atau tiket.com. Website sengaja didesain agar memudahkan pengguna dalam menemukan jadwal penerbangan, kamar kosong hotel dan membeli tiket secara online.

    Website aplikasi bersifat unik sehingga pengembangannya harus memikirkan cara tersebut dalam memanajemen data dan informasi yang ada di dalam website sesuai dengan kebutuhan dan layanan yang diinginkan pada website.

    4. Website Pembelajaran

    Website Pembelajaran adalaah webiste yang dikembangakn dengan tujuan melayani proses pembelajaran baik itu sebagai enhanched dari pembelajaran di dalam kelas atau menggantikan kelas-kelas konvensional atau Pembelajaran Daring Penuh.

    Website ini adalah perpaduan antara website aplikasi dan Blog yang memiliki fitur sesuai dengan kebutuhan belajar, seperti :

    1. Blog untuk menampilkan materi pembelajaran,
    2. chating individu dan komunitas
    3. Absensi
    4. Penugasan / Assigment
    5. Ujian online / Quiz
    6. Account Administrator

    Website pembelajaran pada umumnya dibuat menggunakan Platfrom yang disebut LMS (learning management System) dan LCMS (Learning and Content Management System). Contoh-contoh LMS ini adalah Moodel, schoology dan sejenisnya.

    C. Cara Membuat Website

    Ada banyak cara membuat Website, tergantung dari jenis, platfrom, dan jenis server. Mari kita mulai tutrial cara membuat website ini dari layanan gratisan seperti Bloggger dan WordPress.com.

    1. Blogger.com

    Blogger.com adalah layanan platform close source tapi dapat dinikmati secara gratis, layanan ini memberikan kita fasilitas mengatur webiste yang kita miliki dari sisi front end – HTML Editor.

    Blog yang dikelolal akan ditayangkan melalui sub domian blogspot yakni namadomainkamu.blogpsot.com, namun jia kita memiliki domain TLD, blogger punya fasilitas untuk redirect domain mereka ke TLD kamu.

    Adapun cara membuatnya adalah :

    1. Masuk browser, lalau Loging di gmail.com yang kamu miliki.

    2. Buka blogger.com dan secara otomatis kamu akan memiliki akun blogger.

    3. Silahkan Buat Blog Baru, kamu akan diarahkan untuk membuat nama Blog kamu, kamu URL paramater kamu yang ujungnya akan diberi blogspot.com. Setelah itu, Blog kamu akan jadi dan sudah bisa diakses di alamat yang kamu buat.

    Cara mmebuat Website basis BLog

    4. Langkah selanjutnya adalah mengelola Blog melalui Dashboard Blogger.

    Fitur dan layanan dari Blogger

    Adapun list layanan dari blog sebagai berikut :

    1. Postingan – Menampilkan postingan yang kamu punya baik yang sudah terbit atau statusnya masih dalam bentuk draft
    2. Statistik – Menunjukkan trafik yang berhubungan blog
    3. Komentar – Fasilitas me-manage komentar yang tampil, dihapus dan dimasukkan ke kolom SPAM di blog kamu.
    4. Penghasilan – Menu yang memnghubngkan blog kamu dengan google adsense, karena Blogger dan Google Adsense berasal dari perusahaan yang sama yakni, jadi daftar Google adsense lewat Blog itu lebih mudah.
    5. Halaman – Mengelolan Poastingan dalam bentuk Page yang bersifat statis
    6. Tata Letak – Fasilitas mengatur tampilan situs dengan metode drag and drop
    7. Tema – Fasilitas untuk mengatur tampilan situs melalu editor HTML
    8. Setelan – Fasilitas untuk mengatur setelah dari situs terkait dengan indentitas blog dan izin perapan dari Blog.
    9. Daftar Bacaan – Daftar bacaan ini adalah blog yang kamu follow atau Subscribe

    5. Redircet Domain – Menu ada di setelah yang dalam bentu Costum Domain, jika kamu sudah beli domain, domain blog kamu bisa berubah menjadi www.namadomainkamu.com, jadi sudah bukan namadoaminkamu.blogspot.com. Hal ini tentu saja membuat Website kamu terlihat lebih serius.

    Cara redirect Domain blog ke TLD

    2. WordPress.com

    WordPress.com adalah layanan gartis yang disediakan oleh WordPress dengan cms yang sama, WordPress. Layanan ini sama dengan dengan Blogger.com yakni mengizinkan orang secara bebas membuat dan mengelola Website yang tidak melangar aturan komunitas wordpress.com.

    WordPress juga mengizinkan mengelola tampilan sampai pada level HTML Editor tapi tidak sampai Back-end. Perbedaannya mendasar Blogger.com dan wordpress.com ada pada sistem Redirect. Jika di Blogger kita bebas menggunakan TLD dari pihak III, di WordPress harus membeli domain dari mereka.

    Adapun langkah untuk membuat WordPress.com seperti berikut :

    1. masuk ke wordpress.com
    2. silahkan buat akun wordpress.com dengan sinkrnisasi melalui Gmail.com ataupun apple account.
    3. Masukkan nama domain kamu pada menu yang sediakan, lalu silahkan pilih tipe yang akan gunakan. Disana ada pilihan
      1. gratis
      2. personal (Rp. 78.000 perbulan)
      3. Premium (Rp. 156.000 perbulan)
      4. Bussiness (Rp. 399.000 perbulan)
      5. e-commerce (Rp. 700.100 perbulan)
    4. Setelah itu, blog sudah mengudara sama seperti pada blogger. Bedanya costum domain hanya bisa dibeli dari WordPress.com sehingga kita tidak perlu lagi melakukan settingnya DNS seperti di Blog.
    Dashboard WordPress gratisan

    Layanan yang ada pada wordpress.com relatif sama dengan blogger.com untuk layan free.

    Layanan WordPress berbayar

    Catatan : Hosting wordpress.com dilakukan di hosting mereka sendiri, sehingga sekalipun kamu membeli produk premium dari WordPress, mereka tetap memberlakukan ToS. Hal ini berarti, kamu harus siap-siap sewaktu-waktu situs kamu dihapus oleh WordPress.com karena melanggar aturan.

    Tos WordPress.com

    3. WordPress Self Hosting aka WordPress.org

    Dari sekian banyak jenis dan platform Website, sebagai tutorial terakhir cara membuat website. saya memilih wordpress.org di bagian ke III. Alasanyanya karena WordPress.org atau WordPress Selfhosting adalah Platform yang paling banyak digunakan didunia. Bahkan 80% lebih situs di dunia menggunakan CMS WordPress.org

    Selain itu, costumisasai dari WordPress.org juga cukup terbuka mengingat CMS ini mengadopsi sistem Opensource yang bisa dikembangkan sebebas-bebasnya. Jadi tidak ada salahnya jika kita membuat tutorial cara membuat website dengan platform wordpress.

    Syarat awal bisa menginstal webiste berbasis WordPress self hosting adalah kita harus menyediakan Hostingan sendiri yang berfunsgi sebagai Server website. Tipenya bebas, mulai dari Shared Hosting, VPS, sampai dedicated. Shared hosting biasnaya dilengkapi dengan CPhanel, sehingg tidak perlu dibuat tutorialnya, karena cara membuat websitenya basis Instal Apalikasi. Jadi sisah klik Instal WordPress maka jadi deh.

    Saya akan memberikan tutiral singkat membuat Website basis WordPress dari VPS.

    Apa itu VPS?

    VPS adalah Virtual Private Server atau sebuah computer virtual yang dimiliki untuk menjalankan aplikasi. Sama seperti Komputer yang kita gunakan, Website adalah aplikasi yang berjalan di sebuah komputer, yang butuh Processor, RAM dan Storage.

    Karena aplikasi yang digunakan akan diakses online, maka kita butuh Pita Jaringan atau Bandwith yang membuat komputer tersbeut bisa diakses dari luar.

    Di Computer yang akan diinstal website tentu saja butuh Opeartyng System (OS) sama seperti laptop yang digunakan juga. Agar lebih singkat kita akan membahas cara membuat Website WordPress self hosting dengan spesifikasi seperti berikut :

    • OS : Ubuntu
    • OS Web Server : NginX
    • DataBase : MySQL
    • Bahasa Pemogramam Website : PHP
    • Pengelola Database : phpMyAdmin
    • CMS : WordPress

    Kita asumsikan ubuntu sudah berjalan dengan baik karena setiap kali kita menyewa server biasanya sudah paketan dengan OS Ubuntu, kecuali jika kita mau pake OS berbayar seperti Windows. Jadi langkahnya adalah :

    1. Instal Sarana dan Lingkungan untuk Server

    1. Update repository Ubuntu dengan perintah : 

    ~# sudo apt-get update && apt-get upgrade

    2. Install NginX di Ubuntu 

    ~# sudo apt-get install nginx

    3. Instal database MySQL

    ~# sudo apt-get install mysql-server

    4. Buat database MySQL sebagai tempat menyimpan Aplikasi WordPress.

    Di dalam MySQL terpdata query yang merupakan Bahasa Pemograman PHP dengan instruksinya adalah CRUD (Creat, Read, Update, Delete).

    ~# mysql -u root -p

    Setelah perintah ini dieksekusi, anda akan diminta membuat akun dan sandi untuk masuk ke root

    5. Membuat database.

    Pastikan database yang dibuat tidak mengandung simbol dan spasi. Sebagai contoh kita gunakan nama database wordpress agar mudah diingat. Kamu juga bis amemberikan nama uvuvwevwevweonyetenyevweugwemubwemosas jika lagi iseng.

    mysql> CREATE DATABASE wordpress CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

    atau perintah berikut untuk nama server uvuvwevwevweonyetenyevweugwemubwemosas

    mysql> CREATE DATABASE uvuvwevwevweonyetenyevweugwemubwemosas CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

    Setelah selesai, anda kembali akan diminta membuat akun dan sandir MySQL, tujuannya sebagai pengamanan dari sisi administrasi dan manajemen database. WordPress kamu dapat dengan mudah di hack dari sisi ini jika keamanan rendah, palagi jika kamu menginstal file PHP yang bisa dengan mudah di-inject dengan script tambahan.

    Pastikan sandi yang digunakna kuat dengan mengandung simbol, angka dan huruf, meskipun sebenarnya hanya dengan huruf sudah bisa digenerate kok. Conoth dibawah ini menggunaan user dengan Matamu, ingat ini sensitif case loh.

    mysql> GRANT ALL ON wordpress.* TO 'Matamu'@'localhost' IDENTIFIED BY 'PasswordAnda';

    Setelah itu, MySQL sudah siap dan sudah memiliki data base.

    Langkah berikutny adalah hapus Privilege MySQL agar Instance MySQL bisa dengan segera mendeteksi setiap perubahan yang kamu lakukan. Mengahapusnya dengan perintah L 

    mysql> FLUSH PRIVILEGES;

    setelah langkah ini jadi deh, dan silahkan keluar dari MySQL dengan perintah :

    mysql> exit;

    6. Install PHP

    Bahasa PHP tidak didukung olhe Ubuntu oleh karena perlu diinstal dengan perintah :

    ~# sudo apt install php7.2-cli php7.2-fpm php7.2-mysql php7.2-json php7.2-opcache php7.2-mbstring php7.2-xml php7.2-gd php7.2-curl php-zip

    Sekarang posisi Server dan Database sudah memiliki sarana dan lingkungan yang cocok untuk WordPress.

    1. Install Worpress

    Isntal WordPress bisa dilakuakn dengan dua cara yakni dengan mengupload file wordpress yang kamus sudah buat sendiri di Laptop kamu secara offline atau dengan menginstal secara online dari WordPress.org. Hal ini yang membuat Self-hosting WordPress sering disebut Werdpress.org agar vis adibedakan dengan wordpress.com

    1. Buat Folder Tempat WordPress

    Sekarang kita akan instal WordPress di dalam folder var/www/html. Jadi kita masuk Foldernya dengan perintah buat folder di Ubuntu

    ~# cd /var/www/html

    2. Download WordPress

    Setelah itu download file WordPress secara online, 

    ~# wget http://wordpress.org/latest.zip

    Dile yang didwoload dalam bentuk zip, jadi silahkan unzip dengan perintah :

    ~# unzip latest.zip

    3. Configurasi Virtual Host dengan NginX

    File configurasi berada berada pada folder site-available jadi silahkan masuk ke folder tersebut dengan perintah : 

    ~# cd /etc/nginx/sites-available/

    buat file configuraasi dengan nama .conf untuk melakukan konfugurasi WordPress dan domain dengan perintah :

    ~# touch wordpress.conf

    File yang dibuat dapat diedit dengan aplikasi Note, untuk mengedit file tersebut :

    ~# nano wordpress.conf

    Setelah kamu akan masuk di text editor seperti gambar di bawah ini

    GNU Text Editor di Ubuntu

    Selanjtunya silahkan berikan perintah ke port 80 untuk diarahkan ke domain yang sudah disiapkan :

    server {
            listen 80;
            root /var/www/html/wordpress;
            index index.php index.html;
            server_name namaDomainkamu.com;
            access_log /var/log/nginx/access.log;
            error_log /var/log/nginx/error.log;
            location / {
                         try_files $uri $uri/ =404;
            }
            location ~ \.php$ {
                         include snippets/fastcgi-php.conf;
                         fastcgi_pass unix:/run/php/php7.2-fpm.sock;
            }
            location ~ /\.ht {
                         deny all;
            }
            location = /favicon.ico {
                         log_not_found off;
                         access_log off;
            }
            location = /robots.txt {
                         allow all;
                         log_not_found off;
                         access_log off;
           }
            location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
                         expires max;
                         log_not_found off;
           }
}

    Ganti nama namaDomainkamu.com dengan domain kamu yang asli. Setelah silahkan simpan dengan short-cut Ctrl + X (windows) atau Cmd + X (Mac). lalu ketik y sebagai persetuan untuk menyimpan.

    Jika ada perintah tambahan yang ingin kamu berikan ke port 80, silahkan lakukan di bawah perintah di atas. Untuk mengecek tidak perintah eror, bisa dicek dengan perintah :

    ~# nginx -t

    jika perintah sudah benar maka akan muncul informasi sebagai berikut :

    Cara mengecek perintah Nginx sudah benar

    Selanjtunya adalah membuat Virtual Host dengan perintah :

    ~# sudo ln -s /etc/nginx/sites-available/wordpress /etc/nginx/sites-enabled/

    Jika sudah maka WP sudah siap dijalankan dari sisi Server. Silahkan restart Nginx agar perintah yang diberikan tersimpan dan dijalankan.

    ~# systemctl restart nginx.service

    Setelah restrat silahkan buka domain atau IP weorpdess yang kamu buat. Kamu akan diarahkan untuk membuat akun WP sebagai default dari WP. Selanjutnya silahkan gunakan wordpress sama persi dengan WordPress.com

    Perbedaannya hanya terletak pada dua hal yakni di WordPress self hosting kamu bisa gunakan

    1. Plugging
    2. Instal Embed file pihak ke tigas seperti Plugging, Templete dan sejenisnya

    FaQ Seputar Pembuatan Website

    Question : Berapakah Modal Awal Membuat Website ?
    Answer : Bisa gratis jika kita masih pakai Blogger atau WordPress.com, paling tidak beli domain yang tidak lebih dari 11$ untuk TLD .com pertahun

    Question : Apakah membuat website harus jago Coding?
    Answer : Tidak perlu, apalagi jika cuman buat Webiste personal atau Web 2.0 seperti Blogger dan WordPress.com

    Question : Apakah bisa menghasilkan uang dengan Website?
    Answer : Jawabanya Website tidak bis amenghasilkan uang, yang mengahasilkan uang adalah jasa dan layanan yang ada di Webiste. Di website ini kamu melihat iklan dari Google Adsense, nah Adsense itulah yang menghasilkan uang, bukan websitenya.