Mengatasi Konten Wordpess Yang Tidak Tampil Pada Saat Migrasi Ke Live

unduhan (1)

Sering kali hal ini terjadi ketika kita sebagai depelover website, yang  menggunakan CMS WordPress ingin mengupload hasil development kita ke live dan ternyata setelah selesai migrasi kelive, hasil imbuhan konten konten pada saat di local tidak tampil di live, terutama konten image. mengapa?

Tidak ada yang salah dengan wordpress a atau yang lainnya, hanya saja kita belum selesai mengkonfigurasi aplikasi kita ketika di upload ke live. Konten-konten yang kita tambahkan pada saat di local masih menggunakan base url local atau http://locallhost ketika sudah di live maka url itu akan tetap tersimpan di database dan ketika di panggil, tentu url itu tidak akan ditemukan.

Hal yang dapat kita lakukan adalah merubah WordPress Address (Url) dan Site Address (Url) sesuai domain web kita di live, caranya sebagai berikut:

  1. Masuk ke wp-admin wordpress anda
  2. Masuk ke Setting -> General
  3. Pada bagian WordPress Address (URL) dan Site Address (URL) ubah sesuai domain website kita
  4. Simpan

Setelah setting selesai kita perlu meng ubah url konten konten yang sudah tersimpan di database yang masih menggunakan base url localhost, kita akan replace data tersebut menggunakan query replace.

  1. Masuk ke database, kemudian masukan query sebagaiberikut
  2. UPDATE wp_posts SET post_content = replace(post_content,”http://localhost/wordpress”,”http://domainkita.in”)
  3. Execute query tersebut
  4. UPDATE wp_posts SET guid = replace(guid,”http://localhost/wordpress”,”http://in “)
  5. Execute query tersebut

 

Silahkan load kembali website wordpress hasil migrasi yang sudah kita konfigurasi ulang.

semoga bermanfaat

Membuat Virtual Host di XAMPP

Biasanya ketika kita membuat applikasi web pada local komputer menggunakan applikasi xampp, untuk mengakses applikasi web yang kita developt biasanya folder aplikasi kita simpan di “xampp/htdocs/aplikasikita” dan url pada web broser kita ketikan http://localhost/aplikasikita maka kita dapat mengakses applikasi yang kita developt di local komputer kita.

URL yang kita ketikan pada webbrowser “ http://localhost/aplikasikita” dapat kita ubah dengan nama domain yang kita mau dengan memanfaatkan VirtualHost. Contohnya aplikasi web di lokal yang kita punya kita akses dengan url “semaunya.com” atau “bebas.com”. bagaimana caranya? Mari kita lakukan bersama sama

langkah pertama

  1. Install Xampp pada windows kita
  2. Simpan applikasi web yang sudah ada di “xampp/htdocs/aplikasikita”
  3. Buka file Host di “C:\Windows\System32\drivers\etc” menggunakan akses sebagai administrator. Tambahkan code ini di baris terakhir :

#tambahkan code ini :

127.0.0.1             localhost

127.0.0.1              madelhaq.com

 

Kemudian simpan. (Note : buka dengan notepad dan run as administrator kemudian open file dimana file Host berada)

 

Dalam kasus ini aplikasiweb yang kita developt dilocal ingin kita akses dengan domain “madelhaq.com”

 

  1. Buka file http.conf di “\xampp\apache\conf\httpd.conf” dan tambahkan code berikut :

<VirtualHost *:80>

DocumentRoot “C:\xampp\htdocs”

ServerName localhost

ServerAlias loaclhost

 

<Directory “C:\xampp\htdocs”>

Options Indexes FollowSymLinks Includes ExecCGI

AllowOverride All

Order allow,deny

Allow from all

</Directory>

</VirtualHost>

<VirtualHost *:80>

DocumentRoot “C:\xampp\htdocs\wordpress”

ServerName madelhaq.com

ServerAlias madelhaq.com

 

<Directory “C:\xampp\htdocs\wordpress”>

Options Indexes FollowSymLinks Includes ExecCGI

AllowOverride All

Order allow,deny

Allow from all

</Directory>

</VirtualHost>

  1. Arahkan DocumentRoot ke tempat folder aplikasi yang ingin kita akses dengan virtualhost yang kita buat
  2. Sekarang nylakan xampp dan run apachenya
  3. Kita test via cmd, ketikan ping madelhaq.com kemudian enter

jika reply from 127.0.0.1 maka sejauh ini tidak masalah

 

  1. Buka webbrowser, dan kita akses ke url, http://madelhaq.com, maka aplikasi kita akan diakses.

The difference between jquery.min.js and jquery.js

indexsometime we dont want know about a little thing, for example like this issue, but I try to write something that maybe there are some people still dont know about The difference between jquery.min.js and jquery.js. the main different is compress and uncompress, the jquery.min.js has been compressed for faster performance when used, the difference from the code we can see that there aren’t space in there. if we compare the code, jquery.js more tidy. why? usualy if we just use the jquery better use jquery.min.js but if we want to developt the code use the jquery.js

 

I think its enough for now,,,,

thanks

POSTGRE

penalaman pertama menggunakan postgre ketika mengerjakan project dari dikti yang requirement db nya pake postgree… ternyata secara sql tidak terlalu beda dengan mysql jadi tidak terlalu kesulitan padasaat itu. apalagi kalo memanfaatkan actiev ecord dari framework kebetulan ketika itu menggunakan framework CI.

masalah yang dialamai ketika menggunakan postgre dengan CI biasanya adalah ketika meload web dengan localhost maka akan memunculkan blank halaman / ga tampil apa apa :p. saya juga bingung. ternyata pada apache xampp harus ada yang di buka extension nya.

pada file xampp/php/php.ini

hapus tanda ; pada extension=php_pdo_pgsql.dll dan extension=php_pgsql.dll

nah maka bisa deh itu nongol apa aja yang udah kita buat pada web kita

 

klo mysql pake phpmyadmin, klo postgre?

klo saya pake pgadmin III, cukup bersahabat dalam segi UserInterface 🙂

nah that’s my experience using postgre

 

Cara menggunakan font awesome

Font awesome menyediakan icon yang bisa digunakan oleh kita pada halaman web yang kita buat. Disini kita akan mencoba menggunakan icon yang disediakan oleh font awesome. Pertama tama download font awesome di halaman ini : http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip, baiklah mari kita mulai:

  1. Buatlah folder dengan nama “fawesome”
  2. Buat file dengan nama index.html
  3. Copi kan folder css dan font yang sudah di download tadi kedalam folder fawesome yang tadi kita buat. Sehingga struktur nya akan seperti ini (abaikan file.docs)

1

4. link kan font-awesome.min.css dalam file index html

 

<html>

<head>

<title>font awesome</title>

<link href="css/font-awesome.min.cs" rel="stylesheet" type="css/text">

</head>

<body>

</body>

</html>

 

  1. icon font awesome dapat digunakan di dalam inline element dalam html seperti <i> atau <span> dengan menambahkan class dengan css prefix fa diikuti nama icon yang ingin ditampilkan. Nama nama icon dapat dilihat di http://fortawesome.github.io/Font-Awesome/icons/
  2. kali ini kita akan menambahkan icon mobil dengan nama fa-car dan icon Instagram dengan nama fa-instagram didalam halaman kita
  3. tambahkan code dalam file index seperti berikut

 

<html>

<head>

<title>font awesome</title>

<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">

</head>

<body>

<i class="fa fa-instagram"></i>

<span class="fa fa-car"></span>

</body>

</html>

 

  1. save filer tersebut dan jalankan pada webrowser. Maka tampilan nya akan seperti ini

2

Semoga bermanfaat

Menggunakan Google Font API

kali ini kita akan encoba bagai mana menggunakan Google Font API. google telah menyediakan banyak jenis font yang bisa digunakan dalam halaman web kita, jadi kita tidak perlu membuata rule font-face dan mendownload jenis jenis font yang kita inginkan. menyenangkan kan? 😀
ada dua yang harus kita lakukan untuk menggunakan Google Font API:
1. tambahkan link stylesheet dalam file halaman

<code>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
</code>
  1. sertakan style pada element yang ingin di set jenis fontnya
<code>
CSS_selector{
font-family:'font name', serif;
}
</code>

pada tahap satu terdapat parameter family yang akan meload jenis font yang kita gunakan, apa bila jenis font menggunakan spasi misal “arial black” maka harus menggunakan tanda + untuk menggunakannya sehingga menjad family=arial+black jika ungin menggunakan 2 atau lebih font maka gunakan tanda |, misalnya kita ingin menggunakan arial dan arial black, sehingga penulisannya seperti ini family=arial|arial+black. harap diingat semakin banyak font yang kita load maka akan berpengaruh terhadap performa kecepatan halaman web kita.

mari kita buat contoh penggunaan google font API
buat file baru dengan nama gfapi.html, kemudian ketikan kode dibawah ini

<code>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald">
    <style>
      body {
        font-family: 'Oswald', serif;
        font-size: 28px;
      }
    </style>
  </head>
  <body>
    <div>saya gunakan google font API</div>
  </body>
</html>
</code>

pada contoh diatas kita gunakan jenis font Oswald. jiika sudah diketikan maka save lah file tersebut dan coba buka pada web browser pada komputer kita.
untuk jenis jenis tulisan yang ada pada google font API bisa dilihat di http://www.google.com/fonts

Membuat Slider Gambar dengan Flexslider

Flexslider adalah jquery slider yang sangat mantap dan mudah di pakai yang dikembangkan oleh WooThemes yang juga pendevelop tema tema wordpress. Silahkan kunjungi webnya di http://www.woothemes.com/flexslider/

gambar1

 

Mari kita buat slider menggunakan flexslider. Pertama tama slilahkan download flexslider di http://www.bluenotesentertainment.com/siteelements/iweb-demos/flex/flex.zip

Jikalau anda sudah mempunyai flexslider yang sudah di download, langkah selanjutnya

  1. Buat lah folder dengan nama slider saya
  2. Didalam folder tersebut buat lah 3 folder dengan nama css, images dan js. Pasti anda tahu kegunaan folder tersebut :D.
  3. Copikan file jquery.flexslider.js yang sudah anda download dan paste pada folder js, jangan lupa masukan juga file jquery.js yang bisa di download di http://jquery.com/download/
  4. Copikan flexslider.css yang sudah anda download dan paste kan didalam folder css
  5. Masukan gambar yang anda inginkan dalam folder images (contoh 3 gambar ajalah)
  6. Copikan folder font yang sudah di download dan pastekan didalam folder slider saya
  7. Buatlah file dengan nama index.html
  8. Maka kurang lebih susunan folder dan file akan seperti ini

gambar2

Edit file index.html menjadi seperti code dibawah ini

<html>
	<head>
		<title>slider with flexslider | Madelhaq</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.flexslider.js"></script>
		<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			$(window).load(function(){
				$('.flexslider').flexslider({
					animation:"fade",
					slideshowSpeed: 100000000,
					ControlsContainer:".flex-container"
				});
			});
		</script>
		<style>
			#wrapper{
				width:400px;
				height:400px;
				margin:0 auto;
				border:1px dashed black;
				padding:5px;
			}
		</style>

	</head>
	<body>
		<div id="wrapper">
			<div class="flexslider">
				<ul class="slides">
					<li><img src="images/1.jpg" /></li>
					<li><img src="images/2.jpg" /></li>
					<li><img src="images/3.png" /></li>
				</ul>
			</div>
		</div>
	</body>

</html>

Save file tersebut, dan jalankan pada webbrowser yang ada pada computer anda