Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
Membuat mockup website merupakan langkah penting dalam proses web development. Untuk memudahkan kolaborasi dalam pengerjaannya, rancangan desain harus dibuat dengan baik sehingga mudah dipahami. Maka, menggunakan kertas dan pulpen saja tidaklah cukup.
Saat ini, terdapat banyak aplikasi yang memudahkan web designer dalam membuat mockup website. Di artikel kali ini, kami sudah memilih 15+ aplikasi terbaik yang bisa Anda gunakan tanpa harus repot riset sendiri.
Sebelum masuk ke daftar aplikasi mockup, mari kita samakan dulu pemahaman tentang mockup.
Mockup adalah salah satu jenis draft desain website seperti terlihat pada gambar berikut:
Mockup merupakan rancangan desain, lengkap dengan elemen, warna dan tipografi yang akan digunakan pada website tersebut. Bisa dikatakan mockup ini sudah hampir bentuk jadi dari desain website.
Umumnya, mockup dibuat menggunakan aplikasi dan bisa dijadikan bentuk cetak jika diperlukan.
Mockup memang lebih detail dibandingkan sketch dan wireframe yang masih berupa draft kasar. Namun, mockup masih bersifat statis. Artinya elemen ataupun menu-menu yang dibuat belum interaktif. Inilah yang membedakannya dengan sebuah prototype.
Nah, mari kita lihat aplikasi mockup yang bisa menjadi teman Anda dalam merancang desain website.
Penting untuk diingat bahwa beberapa aplikasi bersifat multipurpose, dalam arti bisa digunakan untuk membuat wireframe, mockup dan prototype sekaligus. Sedangkan, sebagian yang lain hanya khusus untuk salah satu jenis draft desain saja.
Berikut ini adalah aplikasi website mockup yang sudah kami pilihkan untuk Anda:
Nama Balsamiq sudah tidak asing bagi banyak web designer. Hadir pertama kali dengan versi desktop yang kini bernama Balsamiq 3, saat ini sudah tersedia versi web app-nya yaitu Balsamiq Cloud.
Balsamiq Cloud adalah aplikasi untuk membuat mockup website online. Setelah Anda melakukan signup, Anda bisa langsung membuat New Space dan membuat proyek desain pertama Anda.
Balsamiq Cloud memiliki antarmuka editor yang intuitif. Mulai dari navigator panel, UI library, canvas hingga panel properties semua tersedia lengkap. Jadi, semakin memudahkan Anda membuat mockup website dengan cepat.
Tak hanya itu, aplikasi ini juga memungkinkan Anda membagikan mockup Anda ke klien untuk mendapat review dan komentar. Yang tak kalah menarik, Anda bisa berkolaborasi dengan anggota tim desain lain berkat fitur collaborative editing.
Setelah mendapat hasil yang diinginkan, Anda bisa melakukan export draft tersebut ke dalam bentuk PDF, PNG maupun mengekspornya untuk project lain.
Harga: Free Trial 30 hari. Versi Solo Developer – $9/bulan (2 project).
Figma merupakan salah satu aplikasi pembuat mockup yang cukup andal. Berbeda dengan Balsamiq Cloud, Figma tidak memiliki versi desktop. Jadi, Figma dibuat 100% untuk penggunaan melalui browser.
Membuat mockup website online tentu lebih memudahkan Anda karena bisa melakukannya dimanapun, selama ada jaringan internet.
Satu hal yang menjadi andalan Figma adalah real-time collaboration.
Ya, Anda bisa membayangkan sedang bekerja menggunakan Google Docs. Tentu lengkap dengan fitur commenting untuk memberikan feedback atas desain mockup yang tengah dikerjakan.
Lalu, apa fitur lain yang menjadikan aplikasi ini istimewa?
Tampilannya yang intuitif akan mengingatkan Anda pada aplikasi desktop Sketch. Selain itu, Anda bisa melakukan drag-and-drop gambar ke dalam mask dengan mudah. Plus, adanya fitur Unsplash photo integration tentu semakin memanjakan Anda dalam mendapatkan foto terbaik secara online.
Figma juga memungkinkan Anda melakukan export mockup tersebut ke bentuk JPG, PNG, SVG, dan PDF.
Harga: Gratis (3 projects, unlimited storage). Versi Profesional – $12/bulan (Unlimited Projects).
Jika sebuah aplikasi mockup website dengan tampilan intuitif menjadi dambaan Anda, jangan lewatkan FluidUI.
Aplikasi web-based ini memang mengedepankan kemudahan dan kecepatan dalam menghasilkan sebuah mockup website yang baik. Setelah Anda membuat akun, Anda bisa langsung memulai proyek desain Anda secara online.
FluidUI sudah banyak digunakan oleh perusahaan di seluruh dunia seperti eBay, LinkedIn, Google dan lainnya. Alasannya, tentu fitur unggulan yang ditawarkan oleh aplikasi mockup website ini. Apa saja?
Pertama, Built-in Libraries. Tidak tanggung-tanggung, FluidUI menyediakan hingga 2000 komponen yang bisa Anda gunakan membuat mockup website dengan lebih cepat.
Selain itu, fitur Online Collaboration memungkinkan tim Anda berbagi ide, melihat perubahan secara live, dan melakukan perbaikan yang diperlukan. Jangan khawatir, FluidUI sudah dibekali dengan fitur lock pages yang dapat mengunci halaman ketika Anda sedang melakukan perubahan.
FluidUI memang memiliki versi desktop yang bisa digunakan di semua sistem operasi. Namun, perlu diingat bahwa saat menggunakannya, Anda harus tetap terhubung ke internet.
Harga: Gratis (1 project, max. 10 halaman). Versi Solo – $15/bulan (3 projects)
HotGloo adalah aplikasi untuk membuat mockup website yang sudah dipercaya oleh perusahaan besar seperti Disney dan Behance. Hal ini tentu karena HotGloo memiliki keistimewaan dari sisi tampilan dan fitur.
Ya, pada tampilan default, Anda akan disuguhi kolom tab yang memungkinkan Anda mengerjakan desain untuk ukuran layar yang berbeda sekaligus: website, tablet, dan mobile.
Bahkan, versi terbaru dari HotGloo sudah sepenuhnya HTML-based. Artinya, Anda bisa mengerjakan mockup desain Anda menggunakan editor responsive mereka tanpa harus memilih screen view.
Ingin berkolaborasi secara mobile sambil memberikan review dan komentar pada mockup yang sedang dikerjakan? Tentu bisa. Berbagi project pun kian mudah dengan hadirnya fitur share link yang bisa Anda pilih apakah hanya untuk halaman tertentu saja maupun view only.
Pilihan elemen yang ditawarkan untuk membuat mockup juga sangat lengkap, mulai dari elemen standar, dashboard, shopping hingga media sosial. Jumlahnya mencapai lebih dari 2000 elemen.
Harga: Free Trial 7 hari. Versi Group – $12/bulan (max. 4 pengguna, 2 project).
Tak lengkap jika kami tidak menyebutkan MarvelApp dalam daftar kami.
Jangan tertipu dengan tampilannya yang simple dan clean. Faktanya, aplikasi mockup website online yang andal ini sudah dipercaya lebih dari 500.000 pengguna.
Salah satu kelebihan MarvelApp adalah pilihan template yang banyak. Anda bisa mengeditnya dengan metode drag-and-drop.
MarvelApp merupakan aplikasi multipurpose, baik untuk mockup maupun prototyping. Bahkan, aplikasi ini bisa digunakan tanpa kemampuan coding sama sekali. Tentu mockup website bisa Anda buat lebih cepat, bukan?
Tidak lupa, fitur fast URL sharing juga telah disematkan. Tujuannya, agar bisa mendapatkan feedback lebih cepat untuk perbaikan mockup yang tengah Anda kerjakan.
Salah satu fitur andalan MarvelApp adalah handoff. Fitur ini mentransformasikan desain mockup menjadi kode dan aset yang bisa digunakan developer untuk proses coding lebih lanjut.
Plus, jika Anda ingin melakukan integrasi dengan layanan lain seperti Jira, DropBox, Slack dan lainnya, MarvelApp telah menyiapkannya.
Harga: Gratis (1 Project). Versi Pro – $12 (Unlimited Project, Tanpa Marvel Branding).
Baca Juga: Panduan Lengkap Cara Desain Web dengan Mudah
Apapun jenis website yang ingin Anda bangun, memiliki desain terbaik selalu menjadi tujuan. Bahkan sebagai web designer, Anda bisa membangun web portofolio Anda dengan desain yang unik dan kreatif.
UXPin bisa menjadi salah satu pilihan untuk membuat mockup website tersebut.
Aplikasi ini hadir dalam versi desktop dan web-based app. Anda bisa mengerjakan desain tersebut menggunakan beberapa perangkat yang berbeda.
Setelah melakukan signup UXPin, Anda bisa memulai project desain Anda. Aplikasi ini memudahkan Anda untuk memilih ukuran kanvas yang ingin Anda gunakan. Editornya pun sangat intuitif dengan fitur smart guide dan snapping.
Bagi Anda yang suka bekerja dengan environment gelap, tak perlu khawatir. UXPin memiliki view setting dengan pilihan tema gelap atau terang.
Selain tampilan, fitur aplikasi ini juga lengkap. Salah satunya, fitur real-time collaboration untuk bekerjasama dalam satu draft desain. Anda juga bisa mengatur siapa saja yang bisa mengedit project yang Anda kerjakan, sekaligus menerapkan proteksi password untuk preview desain.
Harga: Free Trial 14 hari, fitur terbatas. Versi Basic – $24/bulan (unlimited projects).
Proto adalah salah satu aplikasi mockup website pilihan kami berikutnya. Jangan salah, Proto juga dipilih oleh Amazon, Evernote dan 500.000 pengguna lain di seluruh dunia.
Apa saja keunggulannya? Proto dibekali dengan template yang akan mempercepat pembuatan mockup website Anda. Kustomisasi pun dengan mudah Anda lakukan untuk header, footer, product catalogue, checkout form hingga tampilan blog.
Anda menginginkan pilihan font lebih banyak? Proto membebaskan Anda memilihnya dari Google Font dan Adobe Font pada Font Manager mereka. Plus, Anda bisa mengunggah font sendiri.
Anda pun bisa mengaktifkan dark theme jika lebih nyaman bekerja dengan mode gelap.
Proto memiliki fitur Asset Manager yang berguna untuk mengatur aset yang Anda gunakan beserta fitur sinkronisasi otomatis DropBox.
Sebenarnya, Proto mendukung fitur export ke HTML, PNG dan PDF serta One-Click Sharing. Sayangya, fitur tersebut bukan untuk versi gratis.
Harga: Free Trial 15 hari. Versi Freelancer – $29/bulan (1 pengguna, 5 project).
Anda tak perlu melakukan instalasi Pidoco untuk menggunakanya. Aplikasi mockup website ini ditujukan untuk penggunaan online melalui browser. Semua pekerjaan Anda otomatis tersimpan pada cloud storage mereka.
Pidoco juga merupakan aplikasi multipurpose untuk membuat mockup atau prototype.
Kemudahan penggunaan Pidoco merupakan nilai tambah yang dimilikinya. Dalam waktu singkat, Anda bisa membuat mockup website dengan baik. Bahkan Anda bisa memanfaatkan fitur reusable component untuk membuat pekerjaan Anda jauh lebih cepat.
Lalu, Anda bisa membagikannya kepada anggota tim lain secara realtime.
Jangan ragu untuk berkolaborasi lebih intens. Sebab, Pidoco sudah dibekali dengan fitur versioning dan tracking untuk setiap perubahan yang dilakukan. Plus, hadirnya comment history untuk mencatat setiap ide yang pernah diberikan.
Pidoco memungkinkan Anda mengekspor hasil desain Anda ke dalam bentuk PDF, PNG, SVG, HTML dan RTF. Lengkap, bukan?
Harga: Gratis (1 Project, Pidoco Watermark). Versi Basic – $9,99 (3 Project).
Baca Juga: 20 Template Web Gratis dan Responsive
Memulai rancangan desain dengan NinjaMock adalah pilihan tepat. Aplikasi mockup website ini bisa Anda gunakan langsung dari browser Anda.
Setelah membuat akun dan login, Anda bisa langsung membuat project NinjaMock Anda. Pada halaman depan Anda bisa memilih platform desain terlebih dahulu: website, Windows app, freehand, dan lainnya.
Kenapa NinjaMock layak Anda pertimbangkan?
Pertama, NinjaMock memiliki toolbox yang lengkap. Pada sisi sebelah kanan, Anda bisa memilih elemen yang akan Anda gunakan. Banyak pilihan yang tersedia: basic, tabel data, chart, peta dan lainnya.
Lalu, aplikasi ini satu-satunya yang menyertakan vector editor tool untuk memudahkan Anda menggambar elemen sesuai yang Anda inginkan.
Tak hanya itu, jika Anda mengerjakan berbagai project berbeda, NinjaMock telah dibekali dengan fitur project management. Jadi, Anda bisa mengatur project Anda dengan lebih baik.
Jangan khawatir jika Anda perlu berkolaborasi dengan tim web development yang lain, NinjaMock memiliki fitur one-click sharing dan online commenting. Jika diperlukan, Anda pun bisa mengekspor desain Anda ke format PDF, PNG dan HTML untuk bisa berbagi melalui email.
Harga: Gratis (Bisa diakses publik, NinjaMock branding). Versi Personal – $6,99 (Private, Tanpa NinjaMock branding).
Moqups merupakan salah satu aplikasi mockup website terbaik dengan lebih dari 1,5 juta pengguna.
Moqups memiliki semua yang Anda perlukan untuk membuat mockup website. Ketika membuat project baru, Anda bisa memulai dari awal atau menggunakan template yang tersedia. Tidak perlu khawatir kebingungan saat menggunakannya, sebab desain Moqups sangat intuitif.
Aplikasi ini memberikan banyak pilihan stencil yang bisa Anda gunakan pada sisi kanan halaman kerja Anda. Bahkan terdapat ribuan ikon yang bisa Anda tarik ke dalam desain Anda dengan kemudahan drag-and-drop.
Moqups juga memiliki fitur page management untuk dapat mengerjakan berbagai project dengan kebutuhan ukuran layar yang berbeda. Selain itu, dengan fitur Master Pages Anda bisa melakukan perubahan secara otomatis pada halaman yang ditentukan.
Harga: Gratis (1 Project dengan 200 obyek dan 500MB storage). Versi Personal – $13/bulan (unlimited object dan storage).
Tidak mungkin MockFlow terlewatkan dalam daftar aplikasi kami. Selain multipurpose, MockFlow juga multiplatform. Pengguna Mac dan Windows bisa menggunakan versi desktopnya.
Merancang desain website menggunakan MockFlow sangat menyenangkan. Desain yang ramah pengguna dan ribuan komponen yang disertakan membuat Anda semakin mudah menciptakan mockup yang representatif.
Anda bisa memilih elemen yang ingin Anda gunakan berdasarkan UI pack yang tersedia. Mulai dari hand-drawn, browser frame, ecommerce web, dan lainnya. Bahkan, Anda bisa menambah UI pack melalui Mock Store. Caranya pun sangat mudah, tinggal klik tombol + dan akan langsung terinstal otomatis.
MockFlow juga memiliki fitur workflow dimana tiap desain yang Anda buat bisa Anda kategorikan sebagai sedang dikerjakan, selesai, atau di-approved. Fitur ini tentu akan semakin mendukung fitur real-time collaboration yang dimiliki.
Harga: Gratis (1 project). Versi Premium – $14 (Unlimited Project).
Jika Anda mencari aplikasi mockup website dengan fitur kolaborasi online, Miro bisa jadi pilihan. Faktanya, Miro sudah menjadi favorit 3 juta pengguna, termasuk perusahaan besar seperti Spotify dan Twitter.
Miro sendiri merupakan platform kolaborasi visual yang multipurpose dan multi OS (Mac, Windows, Android, dan iOS).
Anda bisa membuat desain dari awal atau menggunakan library template yang sudah disertakan. Anda juga bisa menambahkan file Anda dari Adobe Creative Suite yang Anda miliki.
Salah satu fitur unggulan Miro adalah interactive online whiteboard. Fitur ini memungkinkan klien atau tim web development lain bisa berkolaborasi secara real time saat menggelar rapat online. Pada akhir rapat, semua hasil diskusi dan feedback yang diberikan bisa Anda simpan atau cetak dalam bentuk PDF.
Hal ini bisa terjadi berkat integrasi yang mulus dengan berbagai platform lain seperti Jira, Slack, Trello, Sketch, dan lainnya.
Untuk memastikan keamanan project yang dikerjakan, Miro sudah dibekali dengan enkripsi SSL, manajemen pengguna, hingga single sign-on.
Harga: Gratis (3 boards). Versi Team $10/bulan/pengguna (Unlimited boards).
Cacoo adalah platform visual design yang telah digunakan oleh 2,5 juta orang. Aplikasi ini multipurpose. Anda bisa menggunakan aplikasi web-based ini untuk membuat mockup website. Semua hasil pekerjaan nantinya akan tersimpan pada Cacoo cloud storage.
Tampilan Cacoo sendiri sangat simple. Namun, berbagai elemen mockup website sudah tersedia secara default, seperti berbagai pilihan button, toggle, scroll bar hingga loading image. Jadi, pekerjaan membuat mockup akan lebih mudah dengan teknik drag-and drop.
Jika Anda tidak ingin membuat desain dari awal, Anda bisa memilih template webpage mockup yang tersedia.
Cacoo juga memiliki fitur online collaboration. Tentu, Anda bisa mendapatkan feedback lebih cepat untuk melakukan perbaikan desain yang diperlukan. Tak hanya itu, Anda bisa mengelola folder bersama (shared folder) dengan lebih rapi menggunakan Cacoo.
Harga: Gratis (6 Halaman, 3 colaborators). Versi Plus – $6/bulan (1000 halaman, unlimited collaborators).
Salah satu aplikasi mockup website yang terkenal dengan kemudahan penggunaannya adalah UXApp.
Aplikasi ini membanggakan drag-and-drop event editor mereka yang sangat intutif. Selain itu, komponen yang ditawarkan sangat banyak, mulai dari Jumbotron, pricing card, checkout form, hingga aneka ragam button. Yang istimewa, komponen tersebut bisa dengan mudah Anda kustomisasi.
Fitur yang tak dimiliki oleh aplikasi lain adalah nested components. Dengan fitur ini, pengguna UXApp bisa mengelompokkan beberapa komponen dalam bentuk tab panel, dynamic panel, accordion panel hingga carousel.
UXApp juga memungkinkan Anda berbagi mockup website secara online melalui fitur Web Sharing, Client Review dan Commenting.
Sayangnya, Anda harus menggunakan versi premium untuk bisa mengerjakan unlimited project.
Harga: Gratis (1 project). Versi Solo – $9/bulan atau $65/sekali bayar (Unlimited projects dan image storage).
Gravit Designer merupakan aplikasi untuk membuat mockup website dengan nama besar Corel di belakangnya. Gravit Designer memang khusus diciptakan untuk graphic dan web designer.
Aplikasi ini tersedia dalam versi desktop dan web apps dengan integrasi Gravit Cloud untuk media penyimpanan.
Setelah login, Anda akan menemukan dashboard area kerja yang penuh dengan opsi elemen khas aplikasi Corel.
Tenang, semuanya tetap tertata rapi sesuai kategori dan tetap Anda bisa mengaksesnya dengan mudah. Pada bagian kiri Anda akan menemukan opsi Layers, Libraries dan Symbols. Sementara di sisi kanan terdapat pengaturan lengkap obyek yang sedang Anda edit.
Semua fitur yang Anda butuhkan untuk membuat mockup tersedia dengan baik seperti auto layout, bermacam efek seperti bayangan, cermin dan lainnya, simbol, hingga Google Font yang memudahkan Anda dalam menentukan jenis font yang tepat.
Sebenarnya Gravit Designer mendukung color space seperti CMYK, HSB dan RGB. Namun, untuk versi gratis hanya bisa menggunakan RGB saja.
Gravit Designer mendukung PDF dan SVG export untuk hasil mockup website Anda.
Harga: Free Trial 15 hari dengan fitur terbatas. Versi Pro – $49/bulan (Unlimited storage, Offline, fitur lengkap)
Creately bisa diandalkan untuk membantu Anda membuat mockup website online. Namun, aplikasi ini juga tersedia dalam versi desktop untuk semua sistem operasi.
Desain creately bisa dikatakan minimalis. Di sisi kiri terdapat panel untuk menambahkan elemen (gambar dan obyek). Namun, secara default tidak ada objek yang disertakan, maka Anda harus menambahkannya sendiri melalui menu Browse more shapes.
Sedangkan di sisi kanan, terdapat menu pengaturan untuk elemen yang sedang dikerjakan. Selain itu terdapat menu untuk catatan, tema, dan layout.
Creately mendukung real-time collaboration beserta fitur comments and actions untuk memberikan feedback atas desain mockup yang dibuat. Selain itu, Anda juga bisa mengekspor hasil desain Anda ke bentuk PNG, SVG, JPG dan PDF.
Harga: Gratis (5 dokumen untuk umum). Versi Personal – $5/bulan (Unlimited, dokumen pribadi)
Selain aplikasi mockup website online, ada beberapa aplikasi lain yang menuntut Anda menggunakannya melalui desktop. Beberapa diantaranya adalah MockPlus, Pencil, Sparkle, Sketch dan Adobe XD.
Hanya saja, aplikasi desktop tentu kurang efektif jika Anda ingin mengaksesnya di beberapa perangkat berbeda. Selain itu, banyak aplikasi yang hanya mendukung salah satu sistem operasi saja seperti Sketch untuk macOS.
Jadi, memilih aplikasi mockup website online tentu merupakan pilihan yang bijaksana.
Kami sudah mengulas 15+ aplikasi untuk membuat mockup website dengan beragam fitur yang disediakan.
Beberapa aplikasi khusus dirancang untuk mendukung kerja web designer dalam membuat desain mockup website. Namun, tak sedikit pula aplikasi yang bersifat multi purpose, bisa digunakan untuk membuat prototype bahkan menggambar vektor.
Apapun aplikasi yang Anda pilih, pastikan sesuai dengan kebutuhan dan tingkat kemahiran Anda.
Selamat berkreasi dengan desain website terbaik Anda!
Source:niagahoster.com
Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
Perbedaan HTTP dan HTTPS akan kami bahas lengkap mulai dari pengertian, perbedaan, dan keuntungan menggunakan HTTPS.
Mungkin Anda sering membaca atau mendengar jika menggunakan HTTPS adalah salah satu penentu rangking website.
Berdasarkan data SSL Labs, pada bulan Februari 2018, terdapat 65.5% website populer yang telah menggunakan HTTPS dari total 135.004 website.
Selain dari sisi SEO, sebenarnya ada keuntungan lain jika Anda menggunakan HTTPS pada website, seperti pembahasan pada artikel ini.
Jika Anda pernah berbelanja online, di bagian nama domain akan terlihat gembok berwarna hijau dan tulisan https sebelum nama domain.
Apakah Anda pernah bertanya-tanya mengenai fungsinya?
Ini akan berguna untuk melindungi informasi Anda, sehingga tidak ada seorang pun dapat mengetahui isi informasi tersebut.
Contohnya ketika Anda melakukan pembayaran menggunakan kartu kredit ketika berbelanja online, data dari kartu kredit Anda akan sulit diketahui oleh pihak ketiga.
Berbeda hal nya jika website yang Anda gunakan untuk melakukan transaksi masih menggunakan http, maka data Anda akan sangat rawan untuk disalahgunakan. Berikut penjelasan lengkap mengenai perbedaan http dengan https yang wajib Anda ketahui.
HTTP adalah singkatan dari Hypertext Transfer Protocol. Merupakan sebuah protokol yang berguna untuk komunikasi antara sistem yang berbeda.Biasanya lebih sering digunakan untuk mengirimkan data dari web server ke browser untuk menampilkan halaman website.
Ini dapat Anda temukan ketika Anda mengakses website yang letaknya diawal nama domain.
Tapi ada masalah jika website Anda menggunakan HTTP. Karena data yang dikirimkan dari browser menuju server tidak di enkripsi, sehingga pihak lain dapat menyalahgunakannya.
Lalu solusinya bagaimana?
Untuk mengatasi hal tersebut dapat menggunakan versi yang lebih aman yaitu HTTPS, dimana S mewakili kata secure, yang artinya aman.
HTTPS adalah singkatan dari Hypertext Transfer Protocol Secure. Dapat Anda temukan ketika mengunjungi sebuah website yang memiliki fitur untuk melakukan transaksi pembayaran atau fasilitas untuk login.
Perbedaan HTTP dan HTTPS akan terlihat ketika Anda mengakses situs HTTP, kebanyakan website yang menggunakan HTTPS akan otomatis melakukan redirect ke HTTPS ketika diakses melalui HTTP://.
Sebagai contohnya, silakan akses alamat berikut http://www.niagahoster.co.id. Maka akan otomatis menjadi https seperti yang terlihat pada gambar di bawah.
HTTPS juga menggunakan TCP (Transmission Control Protocol) ketika akan mengirim dan menerima data melalui port 443 dengan koneksi yang dienkripsi oleh SSL/TLS (Transport Layer Security).
Perbedaan HTTP dan HTTPS juga terlihat ketika Anda mengunjungi sebuah website dengan HTTPS, maka browser akan melakukan pengecekan apakah website tersebut terhubung dengan sertifikat SSL/TLS. Jika terhubung akan terjadi yang namanya SSL handshake.
Browser akan melakukan validasi dari sertifikat SSL dan memastikan website tersebut benar-benar valid.
Selama proses SSL handshake, untuk public key dan private key akan melakukan enkripsi dan dekripsi.
Apabila sertifikat valid, session key akan dibuat oleh klien dan server. Setelah itu koneksi melalui internet sudah dalam kondisi aman dengan ditandai gembok berwarna hijau dan HTTPS sebelum nama domain.
Selain perbedaan HTTP dan HTTP yang telah dijabarkan di atas, perbedaan utamanya terdapat pada keuntungannya. Ada banyak manfaat yang akan Anda dapat ketika menggunakan HTTPS untuk website, berikut ini adalah beberapa diantaranya.
Seperti yang telah diumumkan oleh Google pada tahun 2014 jika HTTPS menjadi salah satu faktor penentu rangking sebuah website. Meskipun demikian, rangking website Anda tidak akan berubah secara signifikan jika mengubah ke HTTPS.
Tapi hal tersebut adalah untuk efek jangka panjang mengenai user experience dan membangun kepercayaan pelanggan kedepannya.
Sehingga untuk berpindah dari HTTP ke HTTPS adalah hal yang perlu dilakukan.
Mungkin Anda pernah melihat pesan “not secure” ketika mengunjungi sebuah halaman pada website ketika akan login atau memasukkan data tertentu.
Biasanya apa yang akan Anda lakukan? Kemungkinan besar beralih ke website lainnya.
Akibatnya pengunjung Anda akan berkurang, dan berakibat menurunnya rangking website Anda.
Tidak menutup kemungkinan hal tersebut akan dilakukan pengunjung website Anda ketika melihat pesan “not secure” di browser.
Beberapa browser saat ini akan menampilkan pesan tersebut. Seperti Google Chrome, mulai bulan Januari 2017 untuk versi 56 ke atas akan menandai website yang masih menggunakan HTTP untuk mengirim password atau kartu kredit, sebagai website tidak aman.
Dengan menggunakan HTTPS, website Anda memiliki kesempatan untuk mendapatkan peringkat terbaik di hasil pencarian Google.
Saat ini pengguna internet memiliki hak privasi, terutama ketika mereka mengunjungi sebuah website.
Dengan menggunakan HTTPS, data pengunjung akan lebih aman ketika mereka berinteraksi melalui website Anda, seperti menginputkan data berupa password atau lainnya.
Komunikasi browser ke server dan server ke server akan dienkripsi, sehingga data user yang dikirimkan akan lebih aman.
Tingkat kepercayaan pengunjung akan meningkat dan pada akhirnya memperbesar peluang konversi pada website Anda.
Menggunakan HTTPS saat ini adalah hal yang penting, meskipun website Anda tidak menangani komunikasi yang sifatnya sensitif.
Selain dapat melindungi informasi data user dan website, HTTPS juga dibutuhkan untuk fitur baru aplikasi web progresif.
Untuk memasang SSL pada website, saat ini bisa Anda dapatkan secara gratis hampir di semua layanan web hosting.
Contohnya seperti di layanan Panduan Blog Online yang menyediakan fasilitas SSL gratis dari Let’s Encrypt, dengan menggunakan cPanel sebagai kontrol panelnya.
SSL gratis ini dapat Anda gunakan di semua paket hosting Panduan Blog Online, mulai dari paket Bayi, Pelajar, Personal dan Bisnis.
Selain itu, dapat digunakan untuk semua domain dan subdomain yang Anda miliki yang ada di akun hosting.
Silakan ikuti langkah di bawah ini untuk memasangnya:
1. Silakan login ke cPanel.
2. Kemudian pada bagian SECURITY pilih menu Lets Encrypt seperti yang terlihat pada gambar di bawah.
3. Silakan klik Issue pada salah satu domain untuk menambahkan sertifikat.
4. Kemudian tekan tombol Issue.
5. Silakan tunggu dalam beberapa saat supaya domain Anda dapat diakses melalui https.
Meskipun website Anda sudah bisa diakses melalui HTTPS, ada satu langkah lagi yang perlu Anda lakukan, yaitu mengarahkan domain ke HTTPS ketika website diakses melalui HTTP.
Jika web server Anda menggunakan Apache, untuk melakukan redirect HTTP ke HTTPS dapat melalui file .htaccess.
Caranya silakan ikuti langkah berikut:
1. Silakan login ke cPanel, kemudian pilih menu File Manager.
2. Kemudian edit file .htaccess yang ada di dalam direktori utama website. Jika website Anda diinstal melalui domain utama untuk file htaccess berada di dalam public_html.
3. Kemudian tambahkan code di bawah ini, setelah itu klik tombol Save Changes.
RewriteEngine OnRewriteCond %{HTTPS} offRewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
Jika website Anda menggunakan WordPress akan lebih mudah untuk melakukannya.
Silakan ikuti langkah di bawah ini:
1. Silakan login ke dashboard WordPress.
2. Kemudian lakukan instalasi plugin dengan memilih menu Plugins > Add New
3. Untuk plugin yang digunakan adalah Realy Simple SSL, silakan ketikkan di tombol pencarian, kemudian klik tombol Install Now, seperti gambar di bawah.
4. Setelah proses instalasi selesai, silakan aktifkan plugin dengan menekan tombol Activate.
5. Supaya website Anda dapat diredirect dengan baik ke HTTPS silakan klik tombol Go a Head, activate SSL!.
Pada langkah ini website Anda akan diredirect otomatis ke HTTPS.
Setelah Anda membaca artikel ini, kami berharap Anda dapat memahami perbedaan HTTP dan HTTPS beserta cara melakukan instalasi pada website. Jika Anda memiliki masukkan atau pertanyaan, jangan ragu untuk berkomentar melalui kolom yang tersedia. Dapatkan juga artikel terbaru langsung di inbox email Anda dengan melakukan Subscribe pada form yang tersedia.
Source:niagahoster.com
Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
Mungkin anda pernah mengalami masalah ketika melakukan perubahan pada WordPress, sehingga mengubah script yang ada pada file .htaccess. Untuk memperbaikinya anda dapat mengembalikan script .htaccess ke setingan default, seperti yang akan di bahas pada tutorial ini.
Sebelum memulai langkah pada tutorial ini, pastikan bahwa Anda memiliki:
Apabila Anda belum mengetahui apa itu file .htaccess, penjelasan kami berikut ini mungkin dapat memberikan gambaran lebih lanjut. Secara default, file .htaccess ini tersembunyi dan berada di direktori utama website. File .htaccess sendiri bukan hanya ada pada WordPress saja, akan tetapi juga digunakan oleh aplikasi berbasis website lain yang menggunakan web server Apache.
File .htaccess tersebut merupakan file yang digunakan untuk konfigurasi ke server. Web server akan mencari file .htaccess ketika website dijalankan dan mengeksekusinya jika file tersebut terdapat di direktori utama website.
Fungsi dari sendiri adalah untuk melakukan konfigurasi ulang pada pengaturan spesifik web server Apache. Hal ini akan berguna ketika Anda mengaktifkan fitur tertentu pada server.
Sebagai contoh, file .htaccess dapat berguna untuk membuat redirect dari non www ke www atau sebaliknya.
Setelah Anda melakukan instalasi WordPress, file .htaccess akan dibuat secara otomatis. File tersebut memang tersembunyi. Oleh karena itu, ketika Anda ingin melihatnya perlu untuk mengaktifkan pilihan Show Hidden Files. Silakan ikuti tutorial cara memunculkan file hidden.
Terkadang instalasi WordPress tidak memiliki file .htaccess di dalamnya. Jika Anda mengalami hal ini, Anda dapat membuatnya secara manual.
Untuk membuatnya dapat menggunakan file manager atau FTP Client. Dalam tutorial ini kami akan membuat file htaccess menggunakan File Manager.
1. Silakan login ke cPanel, kemudian pilih menu File Manager.
2. Jika WordPress diinstal di direktori utama, silakan pilih public_html. Klik +File, ketikkan nama file .htaccess dan klik Create New File.
3. Silakan klik kanan pada file .htaccess kemudian pilih edit dan masukkan baris kode di bawah ini.
# BEGIN WordPressRewriteRule ^index.php$ – [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.php [L]# END WordPress
4. Silakan simpan perubahan dengan menekan tombol Save Changes
Selamat, Anda telah berhasil membuat file .htaccess. Kini website Anda dapat diakses kembali dengan normal!
Setelah menyelesaikan tutorial ini, Anda telah mengetahui cara mengganti file .htaccess WordPress. File .htaccess merupakan file yang wajib ada agar website WordPress Anda berjalan dengan baik. File ini dapat menyediakan fitur tambahan dari web server, terutama untuk pengaturan keamanan seperti pencegahan spam dan memblokir visitor yang berupa robot.
Baca juga artikel menarik lainnya,
Jika Anda memiliki pertanyaan atau masukan mengenai artikel ini, jangan ragu menyampaikannya melalui kolom komentar yang tersedia. Jangan lewatkan update artikel langsung dari inbox email anda dengan cara Subscribe 🙂
Source:niagahoster.com
Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
Cara login WordPress admin pada umumnya Anda hanya memerlukan username dan password saja. Jika password Anda diketahui orang lain tentunya mereka akan dengan mudah melakukan perubahan seperti menghapus postingan atau konfigurasi lainnya. Dengan adanya two factor authentication (2FA) dapat mencegah orang lain login menggunakan password dan username Anda.
Secara singkat, akses ke dashboard admin WordPress akan diblokir, sampai kode yang dikirimkan ke hp Anda sudah dimasukkan. Two factor authentication adalah cara terbaik untuk menambahkan keamanan ekstra pada website Anda. Pada tutorial kali ini, Anda akan belajar bagaimana mengaktifkan two factor authenctication untuk WordPress.
[ecko_alert color=”gray”]Baca juga: 19 Tips Agar Website WordPress Anda Lebih Aman[/ecko_alert]
Sebelum Anda melanjutkan ke tahap berikutnya, pastikan bahwa Anda memiliki:
[ecko_alert color=”red”]PERHATIAN: Kami sangat menyarankan Anda untuk melakukan backup website terlebih dahulu. Tujuannya, supaya Anda dapat me-restore website apabila terjadi kesalahan ketika melakukan instalasi plugin.[/ecko_alert]
Ada beberapa plugin two factor authentication yang dapat digunakan, di antaranya:
Pada tutorial ini kami akan menggunakan Authy Two Factor Authentication.
1. Silakan login ke dashboard admin WordPress Anda.
2. Kemudian pilih menu Plugins > Add New dan ketikkan Authy pada kolom pencarian. Klik Install untuk memulai instalasi plugin.
3. Setelah itu, aktifkan dengan klik tombol Activate.
Setelah plugin diinstal, Anda perlu melakukan beberapa langkah tambahan agar fitur keamanan sepenuhnya terintegrasi.
1. Pertama-tama, Anda perlu membuat akun di Authy guna mendapatkan API Key. Silakan isi detail seperti di bawah ini dan ikuti langkahnya.
2. Silakan pilih Authy dan klik Get Started.
3. Klik tombol Enable Two-Factor Authentication.
4. Silakan pilih radio button ONCE PER COMPUTER, untuk login tanpa Authentication selama 30 hari pada komputer tertentu. Kemudian klik Save.
5. Silakan masukkan nomor telepon yang akan digunakan untuk menerima kode verifikasi dari Authy dan klik Text me.
6. Masukkan kode yang dikirimkan ke nomor telepon Anda dan klik Verify.
7. Setelah itu silakan buat nama untuk aplikasi Anda. Dalam contoh ini kami membuat login wordpress. Jika sudah, silakan klik tombol Create App.
8. Berikutnya Anda perlu klik tombol Setup App.
9. Selanjutnya, sebagai langkah terakhir Anda perlu menyalin API Key untuk dimasukkan pada pengaturan plugin di WordPress Anda.
1. Supaya plugin dapat berfungsi, silakan salin API Key yang didapat ke kolom yang ada di Dashboard admin WordPress > Settings > Authy.
2. Jika key sudah dimasukkan, silakan klik menu Users dan aktifkan Two-Factor Authentication untuk user Anda, seperti yang terlihat pada gambar di bawah ini.
3. Setelah memilih user, silakan scroll ke bawah dan klik tombol Enable/Disable Authy.
4. Masukkan nomor telepon dan klik Continue. Anda akan menerima pesan dengan kode setiap akan login ke dashboard admin WordPress.
5. Coba tes logout dari dashboard WordPress Anda dan kemudian coba login lagi. Di bawah ini adalah tampilan yang harus diisi dengan kode yang sebelumnya Anda dapatkan.
Jika Anda kehilangan handphone dan tidak memiliki cara lain untuk mengakses dashboard admin WordPress, Anda dapat dengan mudah menonaktifkan plugin tersebut melalu File Manager atau FTP client. Silakan masuk ke folder wp-content > plugins dan namai ulang folder authy-two-factor-authentication.
Sebagai contoh, Anda dapat mengubahnya menjadi authy-two-factor-authentication.disabled sehingga Anda dapat dengan mudah mengetahui bahwa plugin tersebut telah dinonaktifkan. Jika Anda ingin mengaktifkannya kembali, Anda tinggal mengubahnya seperti nama sebelumnya.
Dengan mengikuti panduan ini Anda telah belajar bagaimana cara login WordPress lebih aman dengan mengaktifkan Two-Factor Authentication. Kini Anda tidak perlu khawatir lagi apabila ada orang yang memiliki password WordPress Anda dan memiliki niat jahat kepada Anda. Setelah plugin diaktifkan, Anda akan diminta mengisi kode tambahan setiap kali ingin login ke admin WordPress. Anda juga dapat mengaktifkan fitur ini untuk user lain di blog Anda, seperti kontributor maupun editor Anda.
Ingin terus menerima artikel dari kami? Jangan lupa subscribe mailing list kami sekarang! ?
Source:niagahoster.com
