Beranda blog Halaman 31

Mengubungkan Bootstrap Website Bisnis Ke Platform WordPress

Penulis
Dutormasilabs
-
0
Mengubungkan Bootstrap Website Bisnis Ke Platform Wordpress

Dutormasi.com –Pada dasarnya jika sudah membuat website bisnis dari bootstrap maka bisa saja langsung memasukkan nya ke dalam hosting dan memberikan domainnya. Maka otomatis website yang telah dibuat akan bisa di akses melalui internet.

Mengubungkan Bootstrap Website Bisnis Ke Platform WordPress

Namun coba saja pikirkan, apabila anda ingin mengupdate suatu postingan didalam website anda apakah anda harus mengatur di kodingan nya juga? yahhh tentu saja tidak kan. Nahh maka sebab tiulah kita membutuhkan plaform wordpress agar otomatis website yang dibuat bisa diakses melalu wordpress saja dan postingannya bisa di atur melalu wordpress.

Baca Juga : 

Wahh bagaimana caranya? yahhh sebenarnya bagi saya cukup susah dan mudah karena saya juga baru belajar juga. Namun sebelum kita lanjut ke cara masukkan kodingannya ke wordpress, kita bisa harus melihat dulu konsep dan penjelasan website bisnis yang saya buat yaitu website sekolah.


1. Penjelasan Jenis Web

Website sekolah adalah jenis website yang berisi mengenai layanan dan informasi
informasi sekolah seperti :
1. Membantu dalam meningkatkan kredibilitas sekolah
2. Sebagai media informasi sekolah
3. Wadah untuk memamerkan berbagai prestasi sekolah
4. Memperkenalkan berbagai fasilitas yang ada
5. Media untuk promosi
6. Menampilkan profile sekolah
7. Media untuk menampilkan tenaga penedidik sekolah
8. Menyambung tali silaturahmi antara guru dan alumni
9. Media untuk menampilkan galeri sekolah

2. Konsep Web

Pada bagian halaman depan web akan menampilkan tampilan profile sekolah,
prestasi, ekstrakurikuler, tenaga pendidik dan galeri sekolah. Selain itu pada website
ini juga akan menampilkan sebuah informasi atau berita terbaru tentang sekolah yang
nantinya akan membantu wali murid beserta calon siswa siswi baru dalam
mendapatkan informasi tersebut.

Nahh, jika anda sudah mengetahui website bisnis yang akan saya buat. Selanjutnya kita masuk ke tutorial bagaimana cara memasukkan atau menghubungkan bootstrap ke wordpress.

Cara Menghubungkan Bootstrap Ke wordpress

Nahh UNTUK MENGHUBUNGKAN BOOSTRAP KE WORDPRESS, anda harus terlebih dahulu menginstall CMS WordPress. Terserah anda nanty nya CMS tersebut mau dimasukin langsung ke cpanel hosting atau anda ingin masukin terlebih dahulu ke hosting xampp anda.

Kalau anda sudah memiliki file boostrap maka selanjutnya anda menuju saja ke file manager langsung ke wp-content dan pilih themes. Buatlah folder baru dan beri nama theme-boostrap. kemudia isilah beberepa file dan folder didalamnya, seperti berikut yaitu:

Jika kalian sudah memiliki file bootstrap, maka langkah selanjutnya kita akan menuju pada direktori themes di wp-content -> themes. di direktori tersebut silahkan buatlah folder bernama “theme-bootstrap” kemudian buatlah beberapa file dan folder didalamnya seperti contoh berikut :

  1. ASSETS
  2. FUNCTIONS.PHP
  3. INDEX.PHP
  4. STYLE.CSS

Kemudian anda exstrakan file boostrap anda kedalam folder tersebut sehingga folder boostrep yang telah anda buat akan seluruhnya berada pada themes wordpress. Sehingga membentu struktur seperti dibawah ini:

theme-bootstrap
|–assets
|    |–css
|    |   |–bootstrap.css
|    |   |–bootstrap.min.css
|    |   |–bootstrap-theme.css
|    |   |–bootstrap-theme.min.css
|    |
|    |–fonts
|    |    |–glyphicons-halflings-regular.eof
|    |    |–glyphicons-halflings-regular.svg
|    |    |–glyphicons-halflings-regular.ttf
|    |    |–glyphicons-halflings-regular.woff
|    |    |–glyphicons-halflings-regular.woff2
|    |
|    |–images
|    |
|    |–js
|    |    |–bootstrap.js
|    |    |–bootstrap.min.js
|    |    |–jquery.min.js
|    |    |–npm.js
|
|–functions.php
|–index.php
|–style.css

Lalu bukalah file style.css dan isilah pada kode diatasnya seperti kode dibawah ini:

/*
Theme Name: Theme Bootstrap
Author: Onphpid
Author URI : https://facebook.com/bocahapi
Theme URI : http://www.onphpid.com/
Description: Theme ini dibuat untuk praktik tutorial cara menggunakan bootstrap pada wordpress
Version: 1.5
Text Domain: theme-bootstrap
*/
Nah jika sudah anda buka dashboar wordpress anda, lalu aktive kan themes bootrap anda ini. Nah sebenarnya belum sampai situu yaaaa untuk postingan selanjutnya akan saya lanjuti piostingan pada kali ini. Untuk itu selalu tungguin postingan saya selanjutnya dan terima kasih sudah membaca postingan ini.

Salam Dutormasi.

Implementasi Website Bisnis Yang Perlu Diketahui !

Penulis
Dutormasilabs
-
0
Implementasi Website Bisnis Yang Perlu Diketahui !

Dutormasi.com –Jika pada postingan sebelumnya kita membahas mengenai wireframe dan mockup pada website bisnis maka pada postingan kali ini saya akan membahas cara mengimplementasikan nya ke framework boostrap agar website yang dibuat bisa diakses dari internet nantinya.

Implementasi Website Bisnis Yang Perlu Diketahui !
Bootstrap adalah sebuah lemari framework CSS yang dibuat untuk bisa membuat secara khusus untuk bisa mengembangkan front-end atau tampilan interface website. Jadi jika anda telah membuat website anda tadi ke dalam bootstrap nantinya website tingal di pasang dengan hosting dan domain agar website bisa diakses semua orang.

Setelah anda membuat website dan mendesain website, yang anda harus lakukan selanjutnya dalah impementasi. Apa itu implementasi? implementasi adalah sebuah perbuatan atau tindakan yang telah anda susun sebagai rupa dengan secara detail, lalu umumumnya sudah dianggap permanen.

Oleh karena itu saat anda di tahap impelemntasi, usahakan kebijakan pada website anda sudah dibuat dan sudah bulat untuk di oorganisasikan.Oleh klarena itu pengujian akan dilakukan setelah implementasi telah dilaksanakan. Pengujian ini bisa meliputi parameter yang nantinya menentukan standar aplikasi yang berbasis web yang telah anda buat.

Baca Juga :

Sebenarnya banyak sekali framework yang bisa anda gunakan untuk mengimplementasikan desain web yang telah dibuat di wireframe, dan mockup tersebut. Seperti materialize dan codeigniter, namun anda bisa melihat kelebihan boostrap pada paragraf dibawah ini.

 
Kelebihan bootstap adalah :
  • Penggunaan bootstrap cukup mudah
  • Penggunaan bootrap sangat menghemat waktu
  • Tampilan dari bootstrap sangat cukup modern
  • Bootstrap juga responsive dan user friendly.
  • ringan
Penggunaan Bootstrap:
  • Download bootstrap langsung dari website resminya yaitu getbootstrap.com
  • Kemudian anda ambil kode CSS dan Javascript
  • Buka aplikasi sublimetext
  • Letak kode CSS dan Javacript
Jika anda menggunakan framework bootstrap sebagi pilihan anda untuk membuat website, maka sebelum mengimplementasikannya anda harus melihat lingkungan pada implementasi yang harus anda ketahui.

1.Melakukan persiapan pada perangkat lunak

Perangkat lunak yang biasa digunakan pada pembuatan website adalah sebagai berikut:
a.HTML, CSS dan JavaScript atau Notepad++
b.Melakukan implementasi pada basisdata yang telah dibuat seperti dari mySQL dan PHP
Setelah anda melalukan implementasi pada website yang anda buat, hal yang biasa selanjunya dilakukan adalah melakukan pengujian pada website. Tentunya pengujian ini bertujuan untuk menguji masukan dan keluaran dari website. Atau kalau anda ingin lebih jelasnya, hal hal pendekatan yang digunakan untuk melakukan pengujian adalah:
1.Melakukan pengujian fungsional dan operasional
Tentunya pengujian ini bertujuan untuk menguji masukan dan keluaran dari website. hal yang diui biasanya kode yang telah dilakukan seperi kode HTML, CSS javascript yang telah digunakan.
2.Pengujian Navigasi
Nahhh kalau penhujian ini adlaah menguji link link yang ada pada website apakah berjalan dengan sesuai yang diinginkan atau tidak.
3.Pengujian Konfigurasi
Pengujian ini dilakukan apakah website yang dibuat responsive atau tidak. Di uji melalui sistem operasi berbeda, dari laptop atau mobile apakah responsive. Jika mendukung, maka website yang dibuat bagus.
Untuk mengetahui lebih lengkap mengenai lingkungan pada implementasi pada website,ansa bisa membaca pada posingan saya sebelumnya mengenai Implementasi dan Pengujian Pada Design. Semoga dengan membaca postingan saya tersebut, anda bisa memahaminya dengan mudah.
Mungkin sampai sini saja postingan kali ini, semoga bermanfaat. Jika postingan ini bermanfaat silahkan anda share keteman teman anda agar mereka juga mendapatkan manfaat dari postingan ini.
Sekian dan terima kasih. Salam Dutormasi !.

Perancangan Web Bisnis Yang Wajib Kamu Ketahui !

Penulis
Dutormasilabs
-
0
Perancangan Web Bisnis Yang Wajib Kamu Ketahui !

Dutormasi.com – Website bisnis merupakan situs keperluan yang digunakan pada perusahaan, organisasi, sekolah dan lain lain. Website ini merupakan sebuah media informasi yang digunakan mereka agar informasi bisa tersebar cepat secara luas.

Suatu website bisa dilihat secara online jika diberi alamat dan sebuah hosting. Domain adalah sebuah alamat yang ditujukan agar website bisa dibuka sedangkan hosting adalah sebuah layanan yang digunakan agar bisa mengakses sebuah internet.

Perancangan Web Bisnis Yang Wajib Kamu Ketahui !

Oleh karena itu jika anda sudah mempunyai website sebaiknya online kan lah atau publishkan website yang telah dibuat ke internet agar bisa diakses semua orang. Website juga memiliki beberapa jenis yaitu website bisnis dan lain lain.

Banyak jenis website bisnis yang harus ketahui diantarnya adalah e commerce, sekolah atau kampus, organisasi, perusahaan , pemerintahan, personal dan lain lain. Jika anda ingin mengetahui nya lebih luas anda bisa emmbaca di postingan saya sebelumnya mengenai Jenis Jenis Website Bisnis Berdasarkan Fungsinya. Cek saja postingan tersebut dengan cara mengklik bacaan diatas dan saya pastikan anda akan mengerti mengenai website bisnis ini dan beserta fungsinya.

Baca Juga : 

Jika anda ingin merancang sebuah website bisnis perlulah anda sadari bahwa anda harus membuat wireframe dan mockup nya terleboh dahulu. Apa itu wireframe dan mockup, kalau anda penasaran simaklah penjelasan saya dibawah ini mengenai perancangan wireframe dan mockup.

Wireframe

Untuk itu, jika anda ingin memperdalam mempelajari UX Designer anda harus terlebih dahulu memahami deliverables. Baiklah langsung saja kita masuk kepembahasan awal yaitu apa pengertian dari wireframe? Wirefreame adalah sebuah kerangka atau sebuah coretan kasar untuk menata item item yang akan dimasukkan kedalam website sebelum desain website sesungguhnya dimulai.

Apa saja item item tersebut? item item tersebut bisa ditata dianataranya dari banner, footer, header, link, content, form  input dan banyak item item lainnya. Biasanya tugas ini diberikan kepada UI Designer untuk merancang wirefreme ini, bisa itu melwati koretas coret coretan atau menggunakan tools desain khusus wireframing.

Mockup

Berbeda halnya dengan mockup. Mockup adalah sebuah porses kelanjutan dari wireframe.  Mockup juga merupakan desain website yang menjadi salah satu tren yang sering digunakan pada masa kini. Hal ini terutama jika sudah berhubungan dengan internet. Penggunaanya juga cukup mudah, bahkan bisa dicustom juga sesuai dengan keinginan anda.
Mockup merupakan sebuah ujung tombak dari presentasi dari desain web. Dengan adanya mockup ini, dapat menyakinkan anda ketika membuat webisite dengan custom semau anda. Jadi mockup dapat memberikan tampilan website yang sudah jelas dan pastinya tampilan tersebut seperti apa yang telah direncanakan.

Untuk mengetahui lebih luas mengenai wireframe dan mockup ini, anda bisa membaca di postingan saya sebelumnya juga yaitu mengenai perbedaan antara wireframe dan mockup. Karena pada dasarnya wireframe dan mockup memiliki fungsi yang sangat berbeda oleh karena itu gunakan lah fungsinya sebagai semsestinya.

Mungkin sampai sini saja postingan saya pada kali ini, jika anda ingin bertanya silahkan anda berkomentar idbawah ini dan akan saya usahakan untuk mebalas secepatnya.

Salam Dutormasi !.

Jenis Jenis Website Bisnis Berdasarkan Fungsinya

Penulis
Dutormasilabs
-
0
Jenis Jenis Website Bisnis Berdasarkan Fungsinya

Dutormasi.com -Untuk seorang IT membuat website adalah suatu keharusan. Ini karena website adalah sebuah situs web yang birisi sebuah kumpulan dari halaman yang saling berhubungan dan isi berupa informasi penting yang termasuk ke konten multimedia.

Jenis Jenis Website Bisnis Berdasarkan Fungsinya

Suatu website bisa dilihat secara online jika diberi alamat dan sebuah hosting. Domain adalah sebuah alamat yang ditujukan agar website bisa dibuka sedangkan hosting adalah sebuah layanan yang digunakan agar bisa mengakses sebuah internet.

Oleh karena itu jika anda sudah mempunyai website sebaiknya online kan lah atau publishkan website yang telah dibuat ke internet agar bisa diakses semua orang. Website juga memiliki beberapa jenis yaitu website bisnis dan lain lain.

Baca Juga :

Namun, pada kali ini saya akan memberikan informasi mengenai jenis jenis website bisnis saja. Jika anda penasaran terhadap jenis jenis website bisnis ini, anda bisa simak penjelasan saya dibawah  ini dengan teliti agar mudah dipahami.

Jenis Jenis Website Bisnis

1. E-Commerce

Website E-Commerce adalah sebuah website yang didominan kan untuk bisa mengakses jual beli terhadap penjual dan pembeli berupa produk atau jasa melalui akses dari internet. Jadi website ini fungsinya itu seperti menggantikan sebuah toko yang bisa menampilkan produk dan jual beli didalamnya.

2. Personal

Website kedua adalah website bisnis jenis personal. Website ini dimiliki hanya untuk individual atau kelompok kecil yang digunakan untuk menyampaikan informati atau konten yang memang diinginkan oleh pemilkik website tersebut. Contohnya seperti artis artis atau orang terkenal yang membuat website personalnya yaitu raffiahmad.com atau baimwong.com

3.Company profile (perusahaan)

Website ketiga adalah website jenis company profile atau perusahaan. Website ini tentunya dibuat oleh perusahaan yang digunakan untuk menampilkan sebuah informasi bisnis mereka seperti produk atau jasa, visi, misi dan halaman kontak.  Contohnya saja seperti admiros.com dan telkom.com

4. Government (pemerintahan)

Jenis website bisnis selanjutnya adalah website permerintahan. Website ini resmi dimiliki oleh permerintahan, dapartemen atau negara bagian dari suatu negara. Biasanya website ini bertujuan untuk memberikan informasi mengenai satu daerah berikut untuk menyampaikan informasi informasi penting dan peraturan peraturan didalamnya.

5. Organisasi atau Sekolah

Jenis website bisnis terakhir adalah website organisasi atau sekolah. Website ini tentunya sudah sering dilihat oleh mahasiswa dan siswa siswa yang masih duduk dibangku persekolahan yaitu website dari sekolah atau universitas contohnya.

Website ini adalah website resmi yang dimiki sekolah atau universitas untuk menyampaikan informasi informasi penting dari sekolah atau universitas yang ditujukan kepada mahasiswa , guru serta dosen dosennya. Dengan adanya website ini sekolah pun tidak perlu harus menyampaikan pesan sebanyaknya dan kepada siapa karena dengan menyampaikan di website saja orang lain dapat mengakses dan meilihat informasi yang telah diberikan.

Mungkin sampai sini saja postingan kali ini, semoga bisa bermanfaat bagi anda yang ingin membuat suatu website. Untuk anda yang berjuruan anak IT nuatlah website anda sebanyak banyak yang nantinya bakal akan menjadi aset anda untuk melamar kerja atau untuk menambah skill persenetaion anda sebagai seorang IT.

Implementasi dan Pengujian Pada Design Website

Penulis
Dutormasilabs
-
0
Implementasi dan Pengujian Pada Design Website

Dutormasi.com –Website adalah sebuah hal yang harus dimiliki anak anak yang bekerja atau berkuliah didalam jurusan yang berhubungan di bidang IT. Jika anda mempunyai website, tentunya ini akan memberi nilai tambahan bagi anda, sehingga skill peresentasi dan pandangan orang terhadap anda bisa bagus dan bertambah baik bahwa anda bukan anak IT yang abal abal.

Implementasi dan Pengujian Pada Design Website

Makanya usahakan kalau anda seorang anak IT, usahakan anda bisa membuat website. Sapa tau dengan bisanya anda membuat webiste ini, anda bisa menjadikan profesi kerja nantnya seperti front end developer. back end developer dan full stack developer.

Setelah anda membuat website dan mendesain website, yang anda harus lakukan selanjutnya dalah impementasi. Apa itu implementasi? implementasi adalah sebuah perbuatan atau tindakan yang telah anda susun sebagai rupa dengan secara detail, lalu umumumnya sudah dianggap permanen.

Baca Juga : 

Oleh karena itu saat anda di tahap impelemntasi, usahakan kebijakan pada website anda sudah dibuat dan sudah bulat untuk di oorganisasikan.Oleh klarena itu pengujian akan dilakukan setelah implementasi telah dilaksanakan. Pengujian ini bisa meliputi parameter yang nantinya menentukan standar aplikasi yang berbasis web yang telah anda buat.

Lingkungan impementasi pada website

Lingkungan imPlemntasi yang biasa digunakan pada website adalah:

1.Melakukan persiapan pada perangkat lunak

Perangkat lunak yang biasa digunakan pada pembuatan website adalah sebagai berikut:
a.HTML, CSS dan JavaScript atau Notepad++
b.Melakukan implementasi pada basisdata yang telah dibuat seperti dari mySQL dan PHP

Setelah anda melalukan implementasi pada website yang anda buat, hal yang biasa selanjunya dilakukan adalah melakukan pengujian pada website. Tentunya pengujian ini bertujuan untuk menguji masukan dan keluaran dari website. Atau kalau anda ingin lebih jelasnya, hal hal pendekatan yang digunakan untuk melakukan pengujian adalah:

1.Melakukan pengujian fungsional dan operasional

Tentunya pengujian ini bertujuan untuk menguji masukan dan keluaran dari website. hal yang diui biasanya kode yang telah dilakukan seperi kode HTML, CSS javascript yang telah digunakan.

2.Pengujian Navigasi

Nahhh kalau penhujian ini adlaah menguji link link yang ada pada website apakah berjalan dengan sesuai yang diinginkan atau tidak.

3.Pengujian Konfigurasi

Pengujian ini dilakukan apakah website yang dibuat responsive atau tidak. Di uji melalui sistem operasi berbeda, dari laptop atau mobile apakah responsive. Jika mendukung, maka website yang dibuat bagus.

4.Pengujian keamanan

Pengujian ini merupakan pengujian yang paling penting, yahh tentunya kita tidak ingin jika website yang dibuat nantinya memiliki kemanan yang rendah. Rendah disini maksudnya terjadinya gangguan keamanan dari website.

5.Pengujian Konsumen dan evaluasi

Setelah anda melalkukan pengujian dari atas dan ternyata lulus. Maka selanjutnya yang dilakukan adalah pengujian dari konsumen. Ini bertujuan agar apakah website memang cocok dan sesuai dengan kehendar yang mereka inginkan.

Baiklah mungkin sampai sini saja postingan pada kali ini, semoga anda mengerti dengan implemntasi dan pengujian pada sebuah website, Jika ada yang ingin anda tanyakan, silahkan tanyain dengan mengchat saya pada contact dibawah ini.

Sekian dan terima kasih!. Salam Dutormasi !.

6 Komponen Penting Bootsrap yang Harus Ada Pada Tampilan website Kamu !

Penulis
Dutormasilabs
-
0
6 Komponen Penting Bootsrap yang Harus Ada Pada Tampilan website Kamu !

Dutormasi.com –Website adalah sebuah hal yang harus dimiliki anak anak yang bekerja atau berkuliah didalam jurusan yang berhubungan di bidang IT. Jika anda mempunyai website, tentunya ini akan memberi nilai tambahan bagi anda, sehingga skill peresentasi dan pandangan orang terhadap anda bisa bagus dan bertambah baik bahwa anda bukan anak IT yang abal abal.

6 Komponen Penting Bootsrap yang Harus Ada Pada Tampilan website Kamu !

Sebuah website bisa anda buat memggunakan platform seperti wordpress dan blogger atau anda bisa membuat secara manual dengan menggunakan html, css, javascript. Namun ada 1 hal yang bisa anda gunakan untuk membuat website dengan mudah yaitu menggunakan frame work.

Framework adalah sebuah kerangka kerja yang berbentuk software untuk mempermudahkan para programmer untuk membuat suatu aplikasi atau website dari beberapa sisi yaitu fungsi, plugin dan lain sistem tertentu lainnya. Framework sendiri ada yang PHP dan juga framework Javascript dan CSS.

Baca Juga : 

Salah satu framework yang bisa amda gunakan adalah bootsrap.Bootstrap adalah sebuah lemari framework CSS yang dibuat untuk bisa membuat secara khusus untuk bisa mengembangkan front-end atau tampilan interface website.

Untuk Penggunaan Bootstrap bisa anda ikuti dengan mengikuti langkah langkah dibawah ii:

  1. Download bootstrap langsung dari website resminya yaitu getbootstrap.com
  2. Kemudian anda ambil kode CSS dan Javascript
  3. Buka aplikasi sublimetext
  4. Letak kode CSS dan Javacript
Setelah anda mengikuti langkah langkah diatas, maka sekarang komponen komponen yang harus ada didalam website anda agar terlihat bagus dan telihat proferisonal adalah:
1.Navigation Bar
Navigation bar pada sebuah website adalah sebuah keharusan. Karena nanti nya navigation bar ini lah yang akan membuat pengunung anda berpindah kehalaman satu kehalaman lainnya. Contohnya yang biasanya ada didalam navigation bar ini adalah home, about, contact dan lai lain.
2.Jumbotron
Jumbotron ini adalah tampilan yang bisa dijadikan tampilan awakalan agar tampak canti dilihat, Jumbotron ini biasanya dijadikan tampilan header ataupun tampilan body.
3.Form
Form merupakan komonen yang menyediakan sbeuah kolom kolom yang desiakan untuk anda yang ingin berkomentar atau intinya untuk interaksi pemilik dan pengunjung website.
4.Card
Card ini adalah sebuah pembeda gambar gamabar atau biasanya dijadikan untuk postingan blog anda agar diklik pengunjung website anda. Sehingga pengunjung website anda mudah mencari postingan anda dan mencari informasi yang merke inginkan.
5.Buttons
Merupakan sebuah komponen yang telah disediakan oleh bootrap. komponen ini merupakan komponen yang memiliki fungsi timbal balik yang memiliki fungsi dalamnya. Seperti saat anda mengklik sesuatu, maka tampilan aka berubah, Nah biasanya itu adalah tombol buttuon.
6.Pagination
Komponen ini adalah komponen yang paling penting jika website anda memiliki banyak postingan didalamnya. Jadi pagination ini lah yang membantu anda nantinya agar, pengunjung website anda bisa merubah dari postingan 1 ke postingan lainnya, dan ini juga memberikan manfaat kepada anda, karena membuat kebesarn pengunjung anda agar membuka banyak postingan anda lebih banyak.

Baca Juga : Cara Membuat Folder Baru Windows 7, 8 dan 10 Untuk Para Pemula

Baiklah, mungkin sampai sini saja postingan kali ini, semoga bisa bermanfaat bagi anda dan bisa dimengerti dengan mudah kata kata saya diatas.
Sekian dan Terima kasih. Salam Dutormasi. !

Pengertian dan Cara Penggunaan Bootstrap Untuk Membuat Website !

Penulis
Dutormasilabs
-
0
Pengertian dan Cara Penggunaan Bootstrap Untuk Membuat Website !

Dutormasi.com – Saat anda ingin membuat sesuatu hal hal yang berkaitan dengan desain website disarankan terlebih dahulu untuk membuat wireframe dan mockup nya terlebih dahulu. Karena pada dsarnya jika anda ingin membuat desain website, anda tidak bisa langsung membuatnya langsung ke html, framework atau jenis lainnya.

Pengertian dan Cara Penggunaan Bootstrap Untuk Membuat Website !

Untuk itu kalian harus mengetahui terlebih dahulu apa itu wireframe dan apa itu mockup. Wireframe adalah sebuah kerangka atau sebuah coretan kasar untuk menata item item yang akan dimasukkan kedalam website sebelum desain website sesungguhnya dimulai. Sedangkan mockup adalah  sebuah porses kelanjutan dari wireframe.  Mockup juga merupakan desain website yang menjadi salah satu tren yang sering digunakan pada masa kini.

Wireframe sebenarnya hampir sama dengan mockup dan juga saling berhubungan namun wreframe biasanya dibuat terlebih dahulu dikertas untuk merancang desainnya setelah merancang nya lewat kertas setelah itu baru ketahap selanjutnya yaitu membuat mockup. Untuk membuat mockup anda bisa membuat lewat adobe photoshop atau adobe desain lainnya.
Contohnya kita beri kasus untuk membuat tampilan UI home dengan pege landing untuk website saya.

Contoh Wireframe website

  1. Pada lembar wireframe yang akan saya buat ini. Nanti tampilan home, about blog dan contact akan menjadi 1 tampilan. Namun pada postingan sedikit berbeda karena akan membuat lembaran baru jika diklik.
  2. Tampilan nomor 1 terdiri atas header yang ada nama saya sendiri MUHAMMAD RAKHA dan pilihan seperti Home, About, Blog dan Contact. Didalamnya pada tampilan 1 disisipi background, about me dan media sosial.
  3. Pada tampilan 2 merupakan tampilan about. Didalamnya disisipi dengan foto(Lingkaran), nama saya, dan tentang blog ini. Pada sisi kanannya akan saya beri persentase skill.
  4. Pada tampilan 3 merupakan tampilan blog yang didalmnya ada thumbnail postingan dan ada nama penulis dan tanggal penulisan.
  5. Pada tampilan 4 merupakan tampilan contact dan footer yang bisa membuat pengunjung memberikan pesan kepada pemilik website.

Contoh Mockup

Untuk mockup nya kita harus mengikuti wireframe yang telah kita buat diatas. Karena desain wireframe merupakan contohan untuk membuat mockup.
Nah mungkin itulah contoh mockup yang anda rancang dari wireframe ke mockup. Setelah anda membuat mockup nya tahapan selanjutnya yang harus anda lanjuti adalah membuat websitenya. Bagaimana caranya ? caranya bisa anda membuat secara manual dengan HTML,CSS, JAVASCRIPT. Tetapi dizaman sekarang ada banyak cara yang bisa anda pakai untuk mempermudah anda membuat website yaitu framework.
Framework adalah sebuah kerangka kerja yang berbentuk software untuk mempermudahkan para programmer untuk membuat suatu aplikasi atau website dari beberapa sisi yaitu fungsi, plugin dan lain sistem tertentu lainnya. Framework sendiri ada yang PHP dan juga framework Javascript dan CSS.

Baca Juga :

Pengertian Bootstrap dan Kelebihannya

Namun pada kali ini saya akan menjelaskan bootstrap saja. Bootstrap adalah sebuah lemari framework CSS yang dibuat untuk bisa membuat secara khusus untuk bisa mengembangkan front-end atau tampilan interface website.
 
Kelebihan bootstap adalah :
  • Penggunaan bootstrap cukup mudah
  • Penggunaan bootrap sangat menghemat waktu
  • Tampilan dari bootstrap sangat cukup modern
  • Bootstrap juga responsive dan user friendly.
  • ringan
Penggunaan Bootstrap:
  • Download bootstrap langsung dari website resminya yaitu getbootstrap.com
  • Kemudian anda ambil kode CSS dan Javascript
  • Buka aplikasi sublimetext
  • Letak kode CSS dan Javacript
Setelah anda melakukan penggunaan bootstrap tadi, maka anda bisa membuat website dengan mengcopy dan merubah sedikit sedkit codingan yang telah disediakan pada website resminya. Untuk itu cobalah anda belajar membuat mockup yang telah saya buat diatas tadi, jika anda sudah membuatnya maka selanjutnya anda akan mudah saja membuat contoh website dan lain.
Jika anda telah pro menggunakan bootstrap ini, maka anda akan bisa menjadikan skill persentasi anda sehingga bisa menambah skill persentasi pada posrtofolio anda. Mungkin sampai sini saja penjelasan pada kali ini, semoga bisa anda mengerti.
Salam Dutormasi !

Perbedaan Wireframe dan Mockup yang Wajib Anda Ketahui !

Penulis
Dutormasilabs
-
0
Perbedaan Wireframe dan Mockup yang Wajib Anda Ketahui !

Dutormasi.com –Pada saat anda didalam seuah proyek biasanya UX designer pasti akan digunakan ini. UX Designer ini akan membuat sesuatu berbagai macam delvarabels untuk sebuah media komunikasi saat dilakukaknya user research. Nahhh diantara berbagai macamnya deliveravles ini dikenallah istilah wireframe, mockup dan protoctype.

Perbedaan Wireframe dan Mockup yang Wajib Anda Ketahui !

Ketiga istilah yang sabutkan tadi merupakan deliverables yang powerful karena bisa anda mengerti dengan mudah, bukan itu saja deliverables ini juga berbentuk user interface sehingga anda dapat mudah menggunakannya dan mudah dimengerti.

AYOK JOIN KOMUNITAS UNTUK DAPATKAN INFO UI/UX DI TELEGRAM KAMI

KLIK LINK GRUP : t.me/codedutormasi

Wireframe

Untuk itu, jika anda ingin memperdalam mempelajari UX Designer anda harus terlebih dahulu memahami deliverables. Baiklah langsung saja kita masuk kepembahasan awal yaitu apa pengertian dari wireframe? Wirefreame adalah sebuah kerangka atau sebuah coretan kasar untuk menata item item yang akan dimasukkan kedalam website sebelum desain website sesungguhnya dimulai.

Apa saja item item tersebut? item item tersebut bisa ditata dianataranya dari banner, footer, header, link, content, form  input dan banyak item item lainnya. Biasanya tugas ini diberikan kepada UI Designer untuk merancang wirefreme ini, bisa itu melwati koretas coret coretan atau menggunakan tools desain khusus wireframing.

Secara visual wireframe pada dasarnya hanya berupa kotak dan garis garis saja, karena pada visual wireframe ini hanya ditujukan untuk mengatur tata letak elemen elemen pada website. Jadi bisa kita simpulkan bahwa wireframe memiliki tujuan untuk memasukkan elemen ke dalam sebuah tata letak, bukan menunjukkan bagaimana elemen elemen tersebut dapat muncul pada desai akhir.

Kelebihan kelebihan dari wirefreme:

  1. Dapat membangun layout umum dengan websie atau aplikasi
  2. Dapat menghemat biaya dan waktu
  3. Dapat membangun kepercayaan dari pengguna dan stakeholder

Mockup

Berbeda halnya dengan mockup. Mockup adalah sebuah porses kelanjutan dari wireframe.  Mockup juga merupakan desain website yang menjadi salah satu tren yang sering digunakan pada masa kini. Hal ini terutama jika sudah berhubungan dengan internet. Penggunaanya juga cukup mudah, bahkan bisa dicustom juga sesuai dengan keinginan anda.

Baca Juga : 

Mockup merupakan sebuah ujung tombak dari presentasi dari desain web. Dengan adanya mockup ini, dapat menyakinkan anda ketika membuat webisite dengan custom semau anda. Jadi mockup dapat memberikan tampilan website yang sudah jelas dan pastinya tampilan tersebut seperti apa yang telah direncanakan.
Mockup dapat dibuat dari media atau aplikasi pengolah gambar apa saja, contohya adobe photoshop, adobe illustrartor dan corel draw. Jika anda telah menggunakan media aplikasi ini, anda dapat mengolah gambar, tampilan warna website, font dan  mengotak atik tata letak item item website dengan mudah.
Kelebihan kelebihan dari mockup:
  1. Dapat menemukan eror
  2. Bisa mengoorgonisi detail dari proyek
  3. Implemetasi desain
  4. Menyaimpaikan ide kepada anggota tim
  5. Menerjemahkan ide kedalam bahasa yang mudah dimengerti stakeholders
  6. Perspektif user
Nah mungkin sama sini saja postingan kali ini. Perlu anda ketahui, bahwa jika anda ingin mendesarin sebuah website,perlulah anda memerhatikan warna, font dan tata letak yang sesuai. Usahakan lah buat website yang user friendly yang dapat mempermudah pengguna untuk mencari informasi yang mereka inginkan di website anda dengan mudah.
Salam Dutormasi !

Pengertian dan Fungsi HTML (Hyper Text Markup Languange) | Dasar Web

Penulis
Dutormasilabs
-
0
Pengertian dan Fungsi HTML (Hyper Text Markup Languange) | Dasar Web

Dutormasi.com -Saat anda ingin membuat website dari awal, yang anda perlukan adalah sebuah HTML, CSS dan JS untuk membuatnya. Dari 3 jenis yang sebutkan tadi, ia memiliki kegunaan dan fungsi yang sangat sangat berbeda. Untuk itu, saat anda ingin membuat website perlulah terlebih dahulu untuk mengetahui fungsi dari 3 jenis yang saya sebutkan tadi.

Oleh karena itu pada kesempatan kali ini, saya akan membahas mengenai HTMl terlebih dahulu. Untuk CSS dan JS(Java scrivt) akan saya jelaskan pada kesempatan yang lain. Untuk selalu pantaui saja postingan saya yaaa.

Apa itu HTML?

Hal yang pertama kita bahas adalah HTML. Apa itu HTML? HTML adalah kepanjangan dari Hyper Text Markup Languange. Hyper Text Markup Languange merupakan bahasa markah yang bisa anda gunakan untuk membuah sebuah halaman web, sehinggat dapat menampilkan segala sebuah informasi yang dapat dijelajah google dan dilihat oleh kalangan orang banyak bahkan dunia.

Jadi jika anda telah menggunakan Hyper Text Markup Languange ini, anda memungkinkan bisa menyusun sebuah paragraf, image, link, tautan, heading maupun blockquote untuk sebuah web yang akan anda buat nantinya.

Tapi ada yang perlu anda ketahui, HTML atau Hyper Text Markup Languange ini bukanlah sebuah bahasa pemrograman. Jadi HTML ini tidak memiliki kemampuan seperti bahasa pemrograman yang memiliki fungsional yang dinamis. Namun, HTML ini bisa membuat pengguna untuk mengotak atik dan memformat sebuah dokumen, yahhhh hampir sama lah dengan microsoft word.

HTML juga memiliki banyak versi yang telah rilis dari tahun 1991 sampai 2014 yang telah risili HTML5. Apakah kalian pengen tahu? inilah versi HTML nya:

  • HTML -1991
  • HTML 2.0 -1995
  • HTML 3.2 -1997
  • HTML 4.01 -1999
  • XHTML -2000
  • HTML5 -2014
Apa perbedaan dari versi yang lama dengan versi yang baru? tentunya memiliki perbedaanya dong teman teman, kalau tidak memiliki perbedaan tidak mungkin dirilis yang baru kan ? hehe :D. Pada dasarnya suatu hal yang dirilis baru pastinya memiliki pembaruan yang baru dan memiliki kelebihan dari versi yang sebelumnya. Untuk itu jika anda ingin menggunakan HTML, saya sarankan untuk langsung menggunakan versi HTML 5 saja biar mudah dan bisa belajar dengan cepat.
Pada codingan HTML, ada kerangka yang harus anda pahami dan harus anda hapal. Karena kalau tidak ada codingan ini, maka codingan HTML yang anda buat, pastinya tidak bakal bisa diakses. Apakah itu?

Kerangka HTML

<html>
<head>
<title> Judul Halaman Web Yang Ingin Anda Buat </title>
</head>
<body>
Isi Web yang anda inginkan
</body>
<html>
Perlu anda hapalkan kerangkat diatas ini. Karena jika anda tidak mengawali coding menggunakan kerangka seperti diatas, saya pastikan anda tidak bakal bisa melihat hasil output dari codingan HTML yang anda buat. Mungkin sama sini aja postingan kali ini, semoga anda mengerti dan bisa memahami pengenalan dari HTML atau dasar web.
Salam Dutormasi !

Cara Menghubungkan Boostrap Ke WordPress Lengkap

Penulis
Dutormasilabs
-
0
Cara Menghubungkan Boostrap Ke Wordpress Lengkap

Dutormasi.com –Membuat website bisa anda buat dengan berbagai cara dan bisa menggunakan html dan jenis framework lainnya. Framework adalah sebuah kerangka kerja yang digunakan untuk mempermudah seorang programmer untuk membuat website.

Cara Menghubungkan Boostrap Ke WordPress

Salah satu framework yang bisa anda gunakan untuk membuat website adalah bootsrap. Apa itu bootsrap? bootstrap adalah sebuah lemari framework CSS yang dibuat untuk bisa membuat secara khusus untuk bisa mengembangkan front-end atau tampilan interface website.

Kelebihan bootstap adalah :
  • Penggunaan bootstrap cukup mudah
  • Penggunaan bootrap sangat menghemat waktu
  • Tampilan dari bootstrap sangat cukup modern
  • Bootstrap juga responsive dan user friendly.
  • ringan
Penggunaan Bootstrap:
  • Download bootstrap langsung dari website resminya yaitu getbootstrap.com
  • Kemudian anda ambil kode CSS dan Javascript
  • Buka aplikasi sublimetext
  • Letak kode CSS dan Javacript
Kemudian setelah anda membuat website menggunakan bootrap anda bisa memasukkan website tersebur ke dalam CMS wordpress. WordPress merupakan bukan suatu hal yang aneh lagi  saat anda menggeluti dunia blog, banyak sekali platform platform yang tersedia di google.
Namun, walaupun banyak tetapi pada suatu platform tentu memiliki kekurangan dan kelebihan. Untuk tahun 2020, platform yang sangat terkenal dan banyak digunakan oleh orang orang adalah wordpress.Wordpress ini merupakan platform website terbaik sekarang, karena hampir semua perusahaan besar dan website website e comerce sekarang menggunakan platform wordpress sebagai pilihannya.

Baca Juga : 

WordPress adalah sebuah perangkat lunak yang buat atau dirancang agar bisa digunakan semua orang untuk menekankan aksebilitas, kinerja, keamanan agar mudaj digunakan pengguna. Oleh karena itu hampir website website yang ada didunia sekarang rata rata 34% nya memakai WordPress untuk pilihan platform websitenya.

Nahh UNTUK MENGHUBUNGKAN BOOSTRAP KE WORDPRESS, anda harus terlebih dahulu menginstall CMS WordPress. Terserah anda nanty nya CMS tersebut mau dimasukin langsung ke cpanel hosting atau anda ingin masukin terlebih dahulu ke hosting xampp anda.

Kalau anda sudah memiliki file boostrap maka selanjutnya anda menuju saja ke file manager langsung ke wp-content dan pilih themes. Buatlah folder baru dan beri nama theme-boostrap. kemudia isilah beberepa file dan folder didalamnya, seperti berikut yaitu:

Jika kalian sudah memiliki file bootstrap, maka langkah selanjutnya kita akan menuju pada direktori themes di wp-content -> themes. di direktori tersebut silahkan buatlah folder bernama “theme-bootstrap” kemudian buatlah beberapa file dan folder didalamnya seperti contoh berikut :

  1. ASSETS
  2. FUNCTIONS.PHP
  3. INDEX.PHP
  4. STYLE.CSS

Kemudian anda exstrakan file boostrap anda kedalam folder tersebut sehingga folder boostrep yang telah anda buat akan seluruhnya berada pada themes wordpress. Sehingga membentu struktur seperti dibawah ini:

theme-bootstrap
|–assets
|    |–css
|    |   |–bootstrap.css
|    |   |–bootstrap.min.css
|    |   |–bootstrap-theme.css
|    |   |–bootstrap-theme.min.css
|    |
|    |–fonts
|    |    |–glyphicons-halflings-regular.eof
|    |    |–glyphicons-halflings-regular.svg
|    |    |–glyphicons-halflings-regular.ttf
|    |    |–glyphicons-halflings-regular.woff
|    |    |–glyphicons-halflings-regular.woff2
|    |
|    |–images
|    |
|    |–js
|    |    |–bootstrap.js
|    |    |–bootstrap.min.js
|    |    |–jquery.min.js
|    |    |–npm.js
|
|–functions.php
|–index.php
|–style.css

Lalu bukalah file style.css dan isilah pada kode diatasnya seperti kode dibawah ini:

/*
Theme Name: Theme Bootstrap
Author: Onphpid
Author URI : https://facebook.com/bocahapi
Theme URI : http://www.onphpid.com/
Description: Theme ini dibuat untuk praktik tutorial cara menggunakan bootstrap pada wordpress
Version: 1.5
Text Domain: theme-bootstrap
*/
Nah jika sudah anda buka dashboar wordpress anda, lalu aktive kan themes bootrap anda ini. Nah sebenarnya belum sampai situu yaaaa untuk postingan selanjutnya akan saya lanjuti piostingan pada kali ini. Untuk itu selalu tungguin postingan saya selanjutnya dan terima kasih sudah membaca postingan ini.

Salam Dutormasi !.

1...303132...50Halaman 31 dari 50

Artikel Terbaru

Postingan Populer

Mengapa Banyak Perusahaan Kini Beralih ke Infrastruktur Cloud

Mengapa Banyak Perusahaan Kini Beralih ke Infrastruktur Cloud

Muhammad Rakha -
Dutormasi.com - Beberapa tahun lalu, jika sebuah perusahaan ingin menjalankan sistem digital—entah itu website, aplikasi, atau platform bisnis—mereka biasanya harus menyiapkan server sendiri. Infrastruktur...
Cara Mengembalikan Data yang Terhapus di HP dan Laptop

Cara Mengembalikan Data yang Terhapus di HP dan Laptop

Muhammad Rakha -
Dutormasi.com - Momen saat Anda menyadari file penting telah terhapus—entah foto kenangan, dokumen kerja, atau tugas kuliah—memang sangat menegangkan. Kabar baiknya, dalam banyak kasus,...
Cara Mengatasi HP yang Mati Total dan Tidak Bisa Dinyalakan

Cara Mengatasi HP yang Mati Total dan Tidak Bisa Dinyalakan

Muhammad Rakha -
Dutormasi.com - HP tiba-tiba mati total dan tidak merespons saat tombol power ditekan adalah salah satu masalah paling panik yang dialami pengguna smartphone. Sebelum...
Cara Belajar Efektif: 7 Teknik yang Terbukti Secara Ilmiah

Cara Belajar Efektif: 7 Teknik yang Terbukti Secara Ilmiah

Muhammad Rakha -
Dutormasi.com - Pernahkah Anda menghabiskan berjam-jam membaca buku atau catatan, tetapi saat ujian tiba, semuanya terasa hilang dari ingatan? Anda tidak sendirian. Sebagian besar...
© ©2019-2022 Copyright Dutormasi