August 2014 - AW Bali Web Design and Development

Bagaimana Cara Membuat Website

August 15, 2014

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 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? 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

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

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 😀

Autocomplete Search Magento Customer by API Call

August 9, 2014

Hi, today i’m gonna show you how to add ‘Autocomplete Search for Magento Customer by API Call‘. I assume you already read my first post about calling Magento API ‘Play with Magento API SOAP V1‘. This method using jQuery Autocomplete, here is the link.

As i mention in ‘Play with Magento API SOAP V1‘, first of all you gonna need is to make connection between our application and Magento API. Since post before use indonesian language i’ll repeat again here to make sure you follow correct instruction.

Connection

Setting SOAP Account

We need SOAP account to integrate with system and getting the roles we want.

Login to backend magento
System -> Web Services -> SOAP/XML-RPC – Roles
Add New Role
Resource Access -> All -> Save Role
System -> Web Services -> SOAP/XML-RPC – Users
Add New User
On ‘User Role’ Tab, choose role we’ve made before
Save User

Login with SOAP Account

In your host, create php file (ex. magehost.php) and put script below to login using SOAP account you’ve created.

$config=array();
$config["hostname"] = "namahost.com"; //ini adalah host magento anda
$config["login"] = "apiuser"; //ini adalah user API anda
$config["password"] = "apipassword"; //ini adalah password magento anda

$proxy = new SoapClient('http://'.$config["hostname"].'/index.php/api/soap/?wsdl', array('trace'=>1));
$sessionId = $proxy->login($config["login"], $config["password"]);

Hold it here, then we’re gonna make one file to handle autocomplete processing.

jQuery Autocomplete and API Call

jQuery Autocomplete

After we’ve done download jQuery UI, we need to include it on file processing. On this article, i’ll use “Default Functionality” method to request customer name and ID via API SOAP. You can see the full source example method here.
Remember to put jQuery file before jQuery and add css file.

API Call

To call customer data on magento we use ‘customer.list‘. This will allow you to retrieve all customer list on Magento.

Let’s create one file on host (ex. autocomplete.php) and put the code below.

<?php
	require_once('magehost.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Autocomplete Customer Magento Call by API</title>
<link href="your_style.css" rel="stylesheet" type="text/css">
<link href="jquery-ui-1.10.4.custom.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
</head>

<body>
	<input type="text" class="input-text" id="fName" name="customerName" />
    <script type="text/javascript">
		$(document).ready(function() {
			var customerName = [
				<?php
					try { 
						$action = "customer.list"; // action for calling customer data
						$customers = $proxy->call($sessionId, $action);
						foreach($customers as $customer) {
							$lastname = str_replace("'", "", $customer['lastname']);
							echo "'".$customer['firstname'].' '.$lastname.' '.$customer['customer_id']."',";
						}
					}
					catch (Exception $e) { //while an error has occured
						echo "==> Error: ".$e->getMessage(); //we print this
						   exit();
					}
				?>
			];
			$( "#fName" ).autocomplete({
				source: customerName
			});
		});
	</script>
</body>
</html>

Explanation

In the code above , at first we will include our host which is magehost.php => require_once(‘magehost.php’).
Then we make textbox with id fName, the ID will use as identifier for jQuery Autocomplete. And we retrieve all customer list using customer.list and make loop for data. Please remember, the acceptable array format for ‘default fuctionality’ autocomplete is like this [“ActionScript”, “AppleScript”, “Asp”]. Other than that your script will show error. Use console log to debug the script. And to handled error from API call we use Exception something like $e->getMessage(). And if you succes all Magento Customer will retrieve on textbox as autocomplete.

Magento Customer Autocomplete

Noted : This will make your website slower if you have thousands customer list. Use filter to manipulated it. For example you can use :

$filters = array( array('firstname' => array('like'=>'your_input_text%')));
$customers = $proxy->call($sessionId, $action, $filters);

Hope this help 😀