Membuat Koneksi PHP dan Database MySQL

Pada artikel ini akan dijelaskan bagaimana kita membuat koneksi antara bahasa pemrograman PHP dan Database MySQL. Jika sudah terkoneksi kita dapat melakukan beberapa fungsi yang berbeda seperti menambahkan, menghapus, memperbarui dan mengubah data dalam tabel di database MySQL. Ada beberapa perintah dari PHP yang akan digunakan dalam membuat koneksi ini yaitu mysql_connect() (perintah untuk melakukan koneksi ke database mysql), mysql_select_db() (perintah untuk memilih database mana yang akan digunakan), mysql_close() (Perintah untuk menutup koneksi ke database MySQL). Untuk lebih jelasnya berikut sintak standar untuk koneksi PHP dan MYSQL.

<?php
$user_name = "root";
$password = "";
$database = "kampus";
$host_name = "localhost";

$connect_db=mysql_connect($host_name, $user_name, $password);
$find_db=mysql_select_db($database);

if ($find_db) {
 echo "Database Ada";
 mysql_close($connect_db);
}
else {
 echo "Database Tidak Ada";
 mysql_close($connect_db);
}
?>

Perhatikan empat baris skrip pertama yang ditunjukkan di atas, skrip tersebut merupakan pengaturan variabel. Variabel pertama adalah $user_name (nama username untuk masuk ke database MySQL) sedangkan variabel kedua adalah $password (password untuk username tersebut) variabel pertama berisi nilai root sedangkan variabel kedua bernilai "" alias kosong, kita menentukan nilai ini karena nilai ini adalah nilai default untuk database MySQL. Berikutnya adalah variabel $database yang berisi nama database yang ingin dituju dan variabel $host_name yang berisi nama host tempat database berasal.

Untuk baris selanjutnya perintah mysql_connect seperti yang sudah di jelaskan diatas digunakan untuk koneksi ke MySQL yang di dalemnya terdiri dari 3 parameter nama host, username dan password. Bisa saja kita langsung membuat koneksi tanpa diinisialisai seperti diatas, misalnya seperti ini mysql_connect('localhost','root','');.

Baris selanjutnya adalah memilih database mana yang akan digunakan oleh aplikasi yang akan kita buat dengan menggunakan perintah msql_select_db. Pada baris selanjutnya kita akan melakukan pengecekan apakah database tersebut ada atau tidak, jika ada maka akan menampilkan pesan "Database ada" dan jika tidak ada maka akan menampilkan pesan "Database Tidak Ada".

Sekian tutorial cara koneksi PHP dengan database MySQL semoga dapat bermanfaat.

Baca Selengkapnya »

Yang Harus Disiapkan Untuk Memulai Pemrograman PHP

Sebelum kita memulai membuat suatu aplikasi menggunakan bahasa pemrograman PHP kita harus mempersiapkan beberapa hal seperti berikut,

1. Web Server
Web server merupakan software yang memberikan layanan data yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan browser web dan mengirimkan kembali hasilnya dalam bentuk halaman – halaman web yang umumnya berbentuk dokumen HTML.
Fungsi dari webserver adalah untuk mentransfer berkas atas permintaan pengguna melalui protokol komunikasi yang telah ditentukan. Disebabkan sebuah halaman web dapat terdiri atas berkas teks, gambar, video, dan lainnya pemanfaatan server web berfungsi pula untuk mentransfer seluruh aspek pemberkasan dalam sebuah halaman web yang terkait, termasuk di dalamnya teks, gambar, video, atau lainnya. Aplikasi Web server yang bisa digunakan diantaranya IIS, XAMPP, Apache dll.

2. Database Server dan PHP

Database server berfungsi sebagai server yang melayani kebutuhan database kepada semua client secara cepat dan handal seperti penyimpanan, pembacaan, editing, dll.

Database server yang bisa digunakan diantaranya MySQL, PostgreSQL dll.

PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web.

Apabila kita menggunakan aplikasi webserver XAMPP, database MySQL dan aplikasi PHP sudah include didalamnya, sehingga penulis sarankan menggunakan aplikasi webserver XAMPP.

3. Tools

 Setelah ketiga komponen diatas tersedia dan terinstall di komputer, maka kita memerlukan tools untuk memudahkan kita dalam menulis script php dan menjalankannya.
Tools yang bisa digunakan diantaranya Notepad ++, eclipse, Dreamwaver (berbayar) dll.

4. Web Browser
Untuk tahap terakhir kita harus memiliki web browser di komputer kita, karena jika tidak ada web browser bagaimana kita akan menjalankan script-script yang kita buat. Beberapa browser yang bisa di gunakan diantaranya Internet Exploler (sudah langsung terinstall jika kita menggunakan OS Windows), Mozila Firefox, Opera dll.

Demikian penjelasan singkat tentang apa saja yang perlu kita siapkan pertama kali jika akan membuat sebuah aplikasi berbasis web, untuk penjelasan penginstallan dan koneksi PHP dengan database akan dibahas pada artikel selanjutnya.
Semoga bermanfaat..

Baca Selengkapnya »

Membuat Menu Dengan JQuery

Hampir semua web aplikasi yang dibuat terdapat menu untuk mengelola konten sehingga memudahkan pengunjung atau user dalam menggunakannya. Posisi menu di suatu aplikasi bermacam-macam ada yang diletakan di atas, di samping kanan atau kiri. Pada kesempatan ini kita akan membuat menu sederhana dengan bantuan JQuery dan semoga kedepannya bisa dikembangkan menjadi lebih menarik dan efektif.

1. Kita buat sintak HTML nya yang berisi list menu

<ul id="menu">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4
    <ul>
      <li>Sub Menu 4-1</li>
      <li>Sub Menu 4-2</li>
      <li>Sub Menu 4-3</li>
    </ul>
  </li>
  <li>Menu 5</li>
  <li>Menu 6
    <ul>
      <li>Sub Menu 6-1
        <ul>
          <li>Sub Menu 6-1-1</li>
          <li>Sub Menu 6-1-2</li>
          <li>Sub Menu 6-1-3</li>
        </ul>
      </li>
      <li>Sub Menu 6-2
        <ul>
          <li>Sub Menu 6-2-1</li>
          <li>Sub Menu 6-2-2</li>
          <li>Sub Menu 6-2-3</li>
        </ul>
      </li>
      <li>Sub Menu 6-3</li>
    </ul>
  </li>
  <li>Menu 7</li>
</ul>

2. Kemudian kita buat sintak JQuerynya sebagai berikut,

 <link rel="stylesheet" href="code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="code.jquery.com/jquery-1.10.2.js"></script>
  <script src="code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $("#menu").menu();
  });
  </script>

3. Supaya panjang kolom list tidak terlalu lebar, kita tambahkan sedikit style CSS seperti berikut,

.ui-menu { width: 200px; } 

4. Berikut sintak keseluruhan

<html>
<head>
<link rel="stylesheet" href="code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="code.jquery.com/jquery-1.10.2.js"></script>
  <script src="code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $("#menu").menu();
  });
  </script>
<style>
 .ui-menu { width: 200px; } 
</style>
</head>
<body>
<ul id="menu">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4
    <ul>
      <li>Sub Menu 4-1</li>
      <li>Sub Menu 4-2</li>
      <li>Sub Menu 4-3</li>
    </ul>
  </li>
  <li>Menu 5</li>
  <li>Menu 6
    <ul>
      <li>Sub Menu 6-1
        <ul>
          <li>Sub Menu 6-1-1</li>
          <li>Sub Menu 6-1-2</li>
          <li>Sub Menu 6-1-3</li>
        </ul>
      </li>
      <li>Sub Menu 6-2
        <ul>
          <li>Sub Menu 6-2-1</li>
          <li>Sub Menu 6-2-2</li>
          <li>Sub Menu 6-2-3</li>
        </ul>
      </li>
      <li>Sub Menu 6-3</li>
    </ul>
  </li>
  <li>Menu 7</li>
</ul>
</body>
</html>

Untuk melihat demonya bisa dilihat di link Berikut

Baca Selengkapnya »

Drag & Drop Images / Foto Dengan JQuery

Pada artikel ini kita akan membuat fitur drag dan drop image atau foto dari satu Div ke Div yang lain dengan bantuan JQuery yaitu menggunakan plugin JQuery UI Draggable dan Droppable.
 Berikut contoh pembuatannya,
1. Buatlah sintak HTML untuk menampilkan image seperti berikut

<div id="dvSource">

    <img alt="" src="http://vignette4.wikia.nocookie.net/gundam/images/9/98/Gn-0000.jpg" />

    <img alt="" src="http://vignette4.wikia.nocookie.net/gundam/images/f/f5/Ms-05a.jpg" />

    <img alt="" src="http://vignette2.wikia.nocookie.net/gundam/images/0/01/Agx-04.jpg" />

</div>

<hr />

<div id="dvDest">

    Drop here

</div>

Pada syntak diatas terdapat 2 Div dengan id "dvSource" dan "dvDest". dvSource digunakan untuk menampilkan image yang nanti image tersebut akan kita pindahkan ke dvDest.

2. Buatlah sintak CSS nya

<style type="text/css">

body

{

    font-family: Arial;

    font-size: 10pt;

}

img

{

    height: 100px;

    width: 100px;

    margin: 2px;

}

.draggable

{

    filter: alpha(opacity=60);

    opacity: 0.6;

}

.dropped

{

    position: static !important;

}

#dvSource, #dvDest

{

    border: 5px solid #ccc;

    padding: 5px;

    min-height: 100px;

    width: 430px;

}

</style>

3. Terakhir kita buat sintak Javascript / JQuery nya untuk menjalankan fitur drag dan dropnya

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

<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>

<link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet"

type="text/css" />

<script type="text/javascript">

$(function () {

    $("#dvSource img").draggable({

        revert: "invalid",

        refreshPositions: true,

        drag: function (event, ui) {

            ui.helper.addClass("draggable");

        },

        stop: function (event, ui) {

            ui.helper.removeClass("draggable");

            var image = this.src.split("/")[this.src.split("/").length - 1];

            if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {

                alert(image + " dropped.");

            }

            else {

                alert(image + " not dropped.");

            }

        }

    });

    $("#dvDest").droppable({

        drop: function (event, ui) {

            if ($("#dvDest img").length == 0) {

                $("#dvDest").html("");

            }

            ui.draggable.addClass("dropped");

            $("#dvDest").append(ui.draggable);

        }

    });

});

</script>

Untuk contohnya bisa dilihat di link  berikut

Baca Selengkapnya »

Mengelompokkan Content Atau Menu Yang Sejenis Dengan JQuery Accordion

Accordion pada JQuery berfungsi untuk mengelompokkan content dalam panel-panel yang terpisah, dimana pengunjung dapat membuka dan menutup panel-panel yang diinginkan. Disamping itu, accordion juga bisa untuk mengelompokkan menu-menu yang sejenis.
Berikut contoh penggunaan Accordion

<html>
<head>
<title>Menggunakan Accordion</title>
<link type=text/css" href="jquery.ui.all.css" rel ="stylesheet" />
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.accordion.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("#isi").accordion();
});
</script>
<body>
<div id="isi">
   <h2><a href="#">Kelompok Pertama</a></h2>
   <div>Isi content dari kelompok pertama</div>

       <h2><a href="#">Kelompok Kedua</a></h2>
   <div>Isi content dari kelompok kedua</div>

   <h2><a href="#">Kelompok Ketiga</a></h2>
   <div>Isi content dari kelompok Ketiga</div>
</div>
</body>
</html>

Lebih jelasnya bisa lihat contoh pada link Berikut



Pada contoh diatas untuk membuka isinya kita harus mengklik header, bagaimana jika kita ingin membuka isinya cukup dengan mengarahkan cursor mouse ke bagian header?
Caranya mudah saja cukup menambahkan beberapa sintak di dalam script jquery nya seperti berikut :

$("document").ready(function(){
  $("#isi").accordion({
    event:"mouseover"
  });
});

Baca Selengkapnya »

Membuat Kotak Dialog Dengan JQuery

Dalam pembuatan suatu aplikasi kita terkadang harus membuat kotak dialog untuk menampilkan pesan error atau memberikan peringatan kepada pengunjung.
Pada kesempatan ini kita akan membuat kotak dialog dengan JQuery UI. Pada kotak dialog ini kita bisa membuat content yang variatif dan juga bisa membuat content yang interaktif sepertio form.
Berikut contoh penggunaan dialog box / kotak dialog dengan JQuery UI.

<html>
<head>
<title>Kotak Dialog 1</title>
<link type=text/css" href="jquery.ui.all.css" rel ="stylesheet" />
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.dialog.js"></script>
<script type="text/javascript">
$("document").ready(function(){
 $("#pesan").dialog();
});
</script>
<body>
<div id="pesan" title="Contoh kotak dialog">
ini adalah isi dari kotak dialog, content ini bisa di rubah sesuai kebutuhan.
</div>
</body>
</html>

Baca Selengkapnya »

Replace Sebuah Karakter Pada Satu Kalimat Dengan JQuery

Misalkan kita punya kata atau string seperti berikut : "022-123456-3-1", kemudian kita menginginkan tanda "-" dihilangkan pada string tersebut sehingga menjadi "02212345631".
Berikut cara untuk mereplace kasus diatas dengan menggunakan JQuery , seperti berikut:

<script type="text/javascript">
var telepon= "022-123456-3-1";
var hasil = telepon.replace(/\-/g, ""); //Hailnya '02212345631'
</script>

Pada kasus yang lain terkadang kita mereplace satau atau lebih kata yang sama tanpa membedakan huruf besar atau kecil pada sebuah kalimat. Misalnya kita punya kaliman seperti ini "Biru warna langit dan biru warna lautan seperti birunya bola mata kamu". Pada kalimat tersebut kita akan mereplace kata "biru / Biru" dengan kata "hitam". Pada JQuery kita bisa menggunakan perintah berikut:

 <script type="text/javascript">
var kalimat= "Biru warna langit dan biru warna lautan seperti birunya bola mata kamu";
var hasil = kalimat.replace(/biru /gi, "hijau");
 </script>

Baca Selengkapnya »

Substring Dan Replace Dengan JQuery

Pada artikel ini akan di jelaskan bagaimana kita bisa melakukanreplace atau substring pada suatu kalimat atau kata.

Substring
Substring adalah proses mengambil/memotong sebuah karakter pada sebuah string. Dalam JQuery perintah untuk substring dengan menggunaka .substr(), berikut contoh penggunaannya :

<script type="text/javascript">
var pesan = "latihan substring";
//Mengambil karakter dimulai pada karakter ke 3
var Contoh1 = pesan.substr(2); //Hasilnya 'tihan substring'

//Mengambil 5 karakter di awal
var Contoh2 = pesan.substr(0,5); //Hasilnya 'latih'

//Mengambil 5 karakter dimulai pada karakter ke 3
var Contoh3 = pesan.substr(2,5); //Hailnya 'tihan'

//Mengambil 6 karakter terakhir 
var Contoh4 = pesan.substr(-6); //Hailnya 'string'
</script>


Untuk lebih jelasnya bisa dilihat pada link berikut


Replace
Replace adalah proses mengganti/menimpa karakter atau kata pada sebuah string atau kalimat. Bisa juga mengganti tag HTML, misalnya tag <p> menjadi tag <div>. Dalam JQuery perintah untuk replace dengan menggunakan .replace(), berikut contoh penggunaannya :

 <script type="text/javascript">
var pesan2 = "latihan replace";
//Mengganti kata latihan menjadi hasi
var Contoh5 = pesan2.replace("latihan","hasil"); //Hasilnya 'hasil replace'
</script>

Untuk lebih jelasnya bisa dilihat pada link berikut

Baca Selengkapnya »