Cara Membuat Website

Bagaimana Cara Membuat Website

Bagaimana Cara Membuat Website – Artikel/ tutorial berikut ini adalah untuk pemula atau orang yang baru belajar tentang website. Artikel ini tidak ditujukkan kepada webmaster/ webdesigner/ webdeveloper yang sudah mempunyai pengalaman dan sudah ahli pada bidang website dan webdesign.

Disini saya akan mencoba berbagi tips dan trik kepada teman-teman untuk pembuatan website. Cara/langkah berikut merupakan cara menurut saya sesuai pengalaman. Cekidot gan!!=

1. Persiapkan Domain Name

Apa itu Domain?

Apa itu Domain?

Apa itu domain name? domain name adalah nama unik atau alamat yang diberikan untuk mengidentifikasi server. domain name juga sering disebut sebagai URL atau alamat website. Contoh domain name adalah ‘adisthana.com‘ .
Saran untuk pemilihan domain name :

  • Sesuaikan nama domain dengan website yang akan anda buat. Contoh yang salah : nama domain misalnnya gwbolabanget.com , isi website membahas pilpres dan politik (ini ga nyambung banget, jadi jangan ditiru)
  • Pilihlah domain yang mudah diingat
  • Pilih nama domain yang menarik
  • dan lain2

Ada banyak sekali website penyedia jasa domain name yang tersebar di internet. Anda bisa pilih salah satu. Setelah menentukan domain name, sekarang kita persiapkan hostingnya.

2. Web Hosting

Apa itu Web Hosting?

Apa itu Web Hosting?

Apa itu Web Hosting? Web hosting dalam bahasa sederhana adalah tempat untuk menyimpan isi/file dari website. File bisa berbentuk script, gambar, audio, video dll. Web Hosting Provider pun juga banyak tersedia di internet. Anda bisa sesuaikan jangka waktu dan besar space hosting sesuai dengan keperluan anda. Jika anda masih dalam tahap belajar dan coba-coba , saya sarankan pake gratis dulu saja. Bisa search di google dengan keyword : “Free web hosting” atau “Web Hosting Free” atau “Web Hosting Gratis”

3. Web Builder

Contoh Website Builder

Contoh Website Builder

Web Builder disini adalah alat/tool yang akan kita gunakan dalam membangun website. Sebagai alternatif kita bisa menggunakan CMS open source yang tersedia seperti wordpress, joomla, magento dll. Penggunaan masing-masing CMS tergantung dari jenis website yang akan dibuat. Selain mudah dimengerti secara UI (User Interface), anda juga tidak perlu memahami tentang bahasa pemrograman (untuk pemula). Ingat, masing-masing CMS mempunyai kelebihan dan kekurangan masing-masing. Gunakanlah sesuai dengan keperluan anda. Pada setiap CMS akan terdapat backend (administrator area) dan frontend (area yang akan dilihat pengunjung website). Pada backend inilah anda bisa edit-edit content website semau anda.

Alamat sudah ada, hosting sudah siap, web builder sudah oke sekarang waktunya menentukan design untuk frontend website

4. Web Design

aw bali webdesign

aw bali webdesign

Tahapan ini adalah tahapan yang paling seru karena kita akan menentukan design apa yang akan kita gunakan pada website kita. Design website sangat mempengaruhi traffic pada website.
Jika anda menggunakan CMS Open Source tentu themes gratis nya juga akan banyak tersedia di internet. Sesuaikan themes dengan calon pengunjung website. Misal jika website bertemakan ‘Remaja’ pilih warna yang ramai pada bagian header, untuk mencirikan sesuatu yang berani dan bersemangat. Gunakalah warna-warna seperti merah kuning hijau dll. Pokoknya biar semangat hehehe!!! Jangan lupa menempatkan slideshow pada halaman depan / homepage website. Jangan lupa juga memberi logo pada website anda. Tempatkan logo pada bagian header agar mudah dilihat dan diingat.

Dan yang paling penting, pilihlah template website yang responsive.

Responsive Web Design disini adalah design web yang menyesuaikan besar layar pengunjung. Jika dibuka melalui HP/mobile, tablet, laptop, pc dll themes website anda akan terlihat selalu bagus. Jadi pengunjung tidak perlu memperbesar/ zoom karena tidak akan ada tulisan yang terlalu kecil untuk dibaca.

Jika saya misalkan pembuatan website sangat mirip dengan pembuatan rumah. Bayangkan rumah adalah website, tanah tempat membangun rumah adalah hosting, alamat rumah adalah domain, dan desain rumah sama dengan web design. Analogi sederhana seperti itu akan lebih memudahkan anda dalam mengerti dan memahami tentang website dan web design.

Nah, setelah kamu mengikuti bagaimana cara membuat website, Selamat kamu baru saja berhasil membuat website. Next, kita akan bahas bagian-bagian penting dan mendasar dari sebuah website yang perlu kamu ketahui.

Semoga membantu 😀

Magento : Implementasi jQuery Supersized Plugin Pada Spesifik CMS Page

Seperti judul, pada post kali ini sy akan menjelaskan bagaimana implementasi jQuery supersized pada halaman CMS. Bagi yg belum tau apa itu jQuery supersized bisa dilihat disini.
Singkatnya, jQuery supersized adalah plugin jQuery yang memungkinkan kita untuk memasang gambar/slider menjadi background sebuah website.

Pertama download plugin disini.
Kemudian extract file dan akan terdapat beberapa file dan folder.
Disini saya menggunakan jQuery Supersized v 3.2.7.

Upload supersized.3.2.7.min.js ke magento anda pada folder js->jquery->supersized.3.2.7.min
Pada skin->frontend->default->theme_anda->css->buat folder dengan nama ‘supersized’ , kemudian Upload kan folder css dan img pada superisized source anda ke folder ‘supersized’ yang sudah dibuat tadi.
Login ke magento backend -> Clear Cache
Buat halaman CMS dengan nama ‘Test Supersized’ (atau terserah anda), pada tab ‘Design’ masukkan script berikut pada kolom ‘Layout Update XML’

<reference name="head">
	<action method="addJs"><script>jquery/supersized.3.2.7.min.js</script></action>
	<action method="addCss"><stylesheet>css/supersized/css/supersized.css</stylesheet></action>
</reference>

Disini saya asumsikan, anda sudah meload jQuery pada Magento anda. Atau jika belum anda bisa download jQuery disini. Kemudian, upload ke magento anda pada folder js->jquery atau untuk lebih jelasnya anda bisa baca pada post berikut : Menggunakan jQuery di Magento

Jika semua jQuery sudah berhasil di load (Cek menggunakan inspect element pada browser), sekarang buat sebuah file gambar (.jpg/.png) dengan ukuran maksimal 1920px x 1080px.
Upload pada halaman CMS yg anda buat tadi (Insert Image -> Insert File).
Kemudian anda akan mendapat link seperti berikut -> {{media url=”wysiwyg/home_bg.jpg”}}
home_bg.jpg adalah file gambar yg sudah dibuat tadi.

Kemudian masukkan script berikut :

<script type="text/javascript">
	jQuery.noConflict();
	jQuery(document).ready(function() {

		jQuery.supersized({
			autoplay : 0,    // set 1 autoplay run
			slides  :  	[ 
				{image : "{{media url="wysiwyg/home_bg.jpg"}}", title : 'Image Credit: Test Shop'}
			]
		});
	});	
</script>

Pada script diatas background hanya 1 gambar, jika anda ingin membuat menjadi sebuah slider anda bisa membuatnya dengan menggunakan script dibawah :

<script type="text/javascript">
	jQuery.noConflict();
	jQuery(document).ready(function() {

		jQuery.supersized({
			autoplay : 0,    // set 1 autoplay run
			slides  :  	[ 
				{image : "{{media url="wysiwyg/home_bg.jpg"}}", title : 'Image Credit: Test Shop'},
				{image : "{{media url="wysiwyg/home_bg1.jpg"}}", title : 'Image Credit: Test Shop'},
				{image : "{{media url="wysiwyg/home_bg2.jpg"}}", title : 'Image Credit: Test Shop'},
				{image : "{{media url="wysiwyg/home_bg3.jpg"}}", title : 'Image Credit: Test Shop'}
			]
		});
	});	
</script>

Tapi sebelumnya upload dulu semua gambar yang akan digunakan.

Pada saat test dan jika sukses, gambar akan tampil secara penuh menjadi background website anda. Dan jika anda perhatikan dengan menggunakan inspect element akan muncul sebuah id bernama supersized tepat sebelum tag body berakhir

That’s it! Selamat Mencoba 😀

jQuery Background Animate Color

Bagaimana membuat jQuery Background Animate Color.

Merasa bosan ga seh dengan kemampuan CSS 2 untuk fitur hover color yang kurang smooth? Kalo yang kurang paham maksud saya ini contoh hover dengan CSS. Jadi ketika box di hover (tempatkan cursor diatas box) warnanya dari hitam menjadi biru.

Kurang smooth ya? Bagaimana kalo seperti yg dibawah?

Lebih bagus bukan?
Untuk hover yang smooth seperti contoh ke dua menggunakan jQuery UI.
Penggunaannya adalah sebagai berikut :

1. Include jQuery Library pada head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">

2. Include jQuery Background Animate Color pada head

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

3. Buat CSS untuk box

<!-- CSS Box -->
.jQbox {width:150px; height:150px; background-color:#000; margin:20px 0;}

4. Buat HTML untuk Box

<!-- div box -->
<div class="jQbox">
</div>

5. Include script hover pada head atau pada halaman spesifik yang anda inginkan.

<!-- script hover -->
<script type="text/javascript">
	$(document).ready(function(){
		$('.jQbox').hover( //.jQbox adalah nama class box. Ganti dengan nama id atau class anda
			function(){
				$(this).animate({backgroundColor: '#06F'});
			},
			function(){
				$(this).animate({backgroundColor: '#000'});
			}
		); 
	});
</script>

Pada pengaplikasiannya ada banyak metode dan jquery selain jQuery UI untuk membuat animate background seperti diatas.
Jika menggunakan CSS3 maka hanya memerlukan ‘transition’ saja tanpa jQuery.

Semoga membantu 😀

Payment method tidak tampil saat checkout

Kasus Payment method tidak tampil saat checkout saya dapatkan ketika produk yang dibeli mendapat diskon 100% alias gratis dan hanya dikenakan biaya pengiriman saja. Magento yang saya gunakan disini adalah magento CE 1.5. Aneh sekali menurut saya kasus ini karena jika diisikan harga, payment method tampil seperti biasa.

Setelah mencari cari di beberapa site akhirnya saya menemukan solusinya.

Pertama buat copy file dari app/code/core/Mage/Payment/Block/Form/Container.php ke folder local app/code/local/Mage/Payment/Block/Form/Container.php

Dan ‘goto’ line 119

$total = $quote->getBaseSubtotal();

ganti dengan :

$total = $quote->getBaseGrandTotal();

Saya sudah test scriptnya dan berjalan normal.
Penjelasan : script dari core memanggil Subtotal saja, jadi karena subtotal 0 maka payment method tidak muncul, lalu kita ganti dengan mamanggil grand total (sub total + tax) maka valuenya terdeteksi dan tidak 0.

Semoga membantu 🙂

Magento : Filter Kategori pada View.phtml

Magento - Bali web design - Bali web developer - get current category

Magento - Bali web design - Bali web developer - get current category

Berikut adalah code untuk memfilter kategori pada view.phtml.

Misalkan anda punya 3 kategori dengan urutan :
Kategori A -> id = 1
Ketagori B -> id = 2
Kategori C -> id = 3

pada kategori A anda ingin memasukkan ‘link 1’, pada kategori B ‘link 2’ dan kategori C ‘link 3’ :

$categoryId =  Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); //untuk mendapatkan kategori yg aktif pada produk

if ($categoryId=='1'){
echo 'link 1';
} elseif ($categoryId=='2'){
echo 'link 2';
} else {
echo 'link 3';
}

Semoga membantu 😀

Harga Slicing Photoshop File

Ada kalanya anda sudah mempunya desain website dalam bentuk gambar (PSD), tetapi bingung bagaimana mengimplementasikannya menjadi sebuah website. Slicing disini kami maksudkan adalah mengkonversi desain gambar anda menjadi baris-baris kode(HTML/CMS Engine) yang dapat dibaca oleh web browser sehingga menjadi sebuah website. Kami menawarkan beberapa paket slicing basic untuk mengembangkan desain website anda.

 

  1. Slicing PSD to HTML – Start from IDR 250.00 per page
  • Simple Layout file
  • Grid 960
  • Tidak responsive
  • 1 Slider jQuery Plugin

 

  1. Slicing PSD to WordPress – Start from IDR 400.00 per page
  • Simple Layout file
  • Grid 960
  • Tidak responsive
  • 1 Slider jQuery Plugin
  • Slider file hardcode

 

  1. Slicing PSD to Magento – Start from IDR 500.00 per page
  • Simple Layout file
  • Grid 960
  • Tidak responsive
  • 1 Slider jQuery Plugin
  • Slider file hardcode

 

Kami juga menawarkan slicing template yang lebih bervariasi dalam penggunaan slider kreatif dan responsive themes. Untuk harga silakan konsultasikan dengan kami, hubungi kami via email di info@adisthana.com.

Jika anda belum menemukan apa yang anda cari atau masih bingung dengan paket yang kami tawarkan, silakan langsung menghubungi disini atau 087887990222/08179701224 untuk konsultasi.

Semua harga bisa dinegosiasikan.

Klik disini untuk melihat harga paket website

Newer posts