Senin, 15 Agustus 2011

dasar-dasar codeigniter dengan codeigniter 2.0.2 bagian III (connect database)


Kali ini saya belajar bagaimana caranya connecting database di codeigniter dan menampilkan isi table database. Dan seperti biasanya karena saya juga sedang  belajar jika ada kesalahan mohon di koreksi ya… J.
Yu ach kita mulai… o iya, tampilan dan source code merupakan pembaharuan dari source code artikel saya sebelumnya yach…
Sebelum lanjut ke bagian codeigniter , kita persiapkan terlebih dahulu database dan table yang akan kita gunakan , silakan create table berikut pada database.

Database name dbci202

CREATE TABLE IF NOT EXISTS `data_brg` (
  `artikel` int(10) NOT NULL AUTO_INCREMENT,
  `deskripsi` varchar(15) NOT NULL,
  `harga` text NOT NULL,
  PRIMARY KEY (`artikel`)
)


insert into data_brg(artikel,deskripsi,harga)
values('100230110','Mie Rebus Goreng','1250'),
('101430110','Minuman Ringan','2250'),
('103230120','Minyak Goreng','5000'),
('150270110','Permen Coklat','7900'),
('100239110','Kopi Hideung','3400'),
('100230612','Susu Cap Nyai','1500'),
('100230114','Abon Dengdeng','12000'),
('103240110','Biskuit Kering','15000'),
('101430210','Cabe Kriting Garing','500'),
('103230150','Pisau Tumpul','6000'),
('150270115','Paket Coet Lotek','25000');

Sebelum melangkah ke MVC mari kita set config/config.php, config/autoload.php, dan config/database.php.

config/config.php
$config['base_url']= 'http://localhost/webci202/';

config/autoload.php
$autoload['libraries'] = array('database','form_validation');
$autoload['helper'] = array('url','form');

config/database.php
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root'; //user mysql kalian
$db['default']['password'] = ''; //password mysql kalian
$db['default']['database'] = 'dbci202'; //nama database kalian
$db['default']['dbdriver'] = 'mysql';

Untuk controller kita buka kembali c_pages.php, disini saya sisipkan:

    function __construct(){
        parent::__construct();
        $this->load->model('Mappconfig');
    }

Dan pada function index ada pembaharuan menjadi :

function index () {
       $this ->load->helper("form");
       $this ->load->helper("url");
       $this ->load->helper("html");
       $data['query'] = $this->Mappconfig->getAll();
       $this->load->view("v_default",$data);
}

Selanjutnya untuk model dengan kode sbb dan simpan dengan nama mappconfig.php:

<?
class Mappconfig extends CI_model {
        function __construct(){
        parent::__construct();
    }
    function getAll(){
  $this->db->select('artikel,harga,deskripsi');
                 $this->db->from('data_brg');
                 $this->db->limit(11);
                 $this->db->order_by('artikel','ASC');
                 $query = $this->db->get();

                return $query->result();
    }
}
?>

Dan untuk tampilan buka file v_content.php ada pembaharuan pada file tersebut , saya sisipkan  kode berikut:

<?php
  if (isset($query) && count($query) > 0){
?>
 <h1>Data Barang </h1>
 <table width="400" border="1">
   <tr>
    <th>No</th>
    <th>Artikel</th>
    <th>Harga</th>
    <th>Deskripsi</th>
   </tr>
<?php
 $i=0;
  foreach ($query as $row){
    $i++;
    echo "<tr class=\"record\">";
    echo    "<td>$i</td>";
    echo    "<td>$row->artikel</td>";
    echo    "<td>$row->harga</td>";
    echo    "<td>$row->deskripsi</td>";
    echo  "</tr>";
  }
 ?>
</table>
<?php
    }
?>                                          

sehingga secara keseluruhan menjadi:

<!-- start content -->
                <div id="content">
                                <div class="post">
                                                <div class="title">
                                                                <h2><a href="#">About this Template</a></h2>
                                                                <p><small>Posted on August 15, 2011 by <a href="#">Latihan menggunakan CSS</a></small></p>
                                                </div>
                                                <div class="entry">
                                                                <p><img src="../../public/images/banjir.jpg" alt="" width="112" height="112" class="left" />Ieu teh template anu temana <strong>Tingalieun Peuting</strong>, anu ngagunakeun script CSS Gratisan ku <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. anu di rilis ku <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, mangga ah geura cobian hatur lumayan kanggo latihan :)</p>
                                                                <p>templet ieu tiasa di tingali di <a href="http://www.freewpthemes.net/preview/level2/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
                                                </div>
                                                <p class="links"> <a href="#" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="#" class="comments">No Comments</a> </p>
 </div>
<div class="post">
<?php
  if (isset($query) && count($query) > 0){
?>
 <h1>Data Barang </h1>
 <table width="400" border="1">
   <tr>
    <th>No</th>
    <th>Artikel</th>
    <th>Harga</th>
    <th>Deskripsi</th>
   </tr>
<?php
 $i=0;
  foreach ($query as $row){
    $i++;
    echo "<tr class=\"record\">";
    echo    "<td>$i</td>";
    echo    "<td>$row->artikel</td>";
    echo    "<td>$row->harga</td>";
    echo    "<td>$row->deskripsi</td>";
    echo  "</tr>";
  }
 ?>
</table>
<?php
    }
?>                                          
</p>
    </div>
 </div>
<!-- end content -->

dan finally jika berhasil maka ketika kita run Aplikasi di http://localhost/webci202/index.php/c_pages/
akan tampil table dari data_brg seperti gambar di bawah.

 moga bermanfaat aminnnnnnnn

Minggu, 14 Agustus 2011

dasar-dasar codeigniter dengan codeigniter 2.0.2 bagian II

Mungpung masih segar dari ingatan, saya akan kembali mencoba memaparkan kelanjutan mengenai dasa-dasar codeigniter dengan menggunakan codeigniter 2.0.2. masih mengenai MVC kali ini saya akan mencoba memaparkan langkah-langkah dalam mendesign sebuah form, misal form login. dan untuk kesekian kalinya mohonn kiranya dikoreksi jika ada kesalahan atau kekurangan pada pemaparan yang saya berikan hehehehehe maklum asli masih belajar.
baiklah kita mulai...
mula-mula kita asumsikan bahwa kita sudah memiliki sebuah sourcecode .css (buanyaaak sekali template free yang bisa kita pakai ), kita simpan file css tersebut dalam sebuah folder yang kita buat di rootfolder (lihat gambar)

Kita buat folder public dengan sub folder css, images, dan js yang masing-masing akan diisi oleh file-file pendukung
Untuk file css bisa dicopy simpan dengan nama default.css di webci202/public/css/:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
     margin: 0;
     padding: 0;
     background: #000000 url(images/img12.jpg) repeat top left;
     text-align: justify;
     font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
     color: #7F7772;
}
form {
     margin: 0;
     padding: 0;
}
fieldset {
     margin: 0;
     padding: 0;
     border: none;
}
input, textarea {
     padding: 5px;
     border: 1px solid #626262;
     font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h1, h1 a, h2, h2 a, h3, h3 a {
     margin: 0;
     text-decoration: none;
     font-weight: normal;
     color: #AAFF00;
}

h1 {
     letter-spacing: -3px;
     font-size: 2.6em;
}
h2 {
     letter-spacing: -2px;
     font-size: 2em;
}
h3 {
     margin-bottom: 2em;
     font-size: 1em;
     font-weight: bold;
}
p, ol, ul {
     margin: 0 0 2em 0;
     line-height: 200%;
}
blockquote {
     margin: 0 0 0 1.5em;
     padding-left: 1em;
     border-left: 5px solid #DDDDDD;
}
a {
     color: #AAFF00;
}
a:hover {
     text-decoration: none;
     color: #FFFFFF;
}
img {
     border: none;
}
img.left {
     float: left;
     margin: 8px 20px 0px 0px;
     border: 2px solid #434343;
}
/* Header */

#wrapper {
     background: url(images/img14.jpg) no-repeat center top;
}

#header {
     width: 900px;
     height: 128px;
     margin: 0 auto;
}
#logo h1, #logo p {
     float: left;
     color: #AAFF00;
}
#logo h1 {
     height: 88px;
     padding: 20px 90px 0 0;
     font-size: 4em;
}
#logo p {
     margin: 0 0 0 -80px;
     padding: 55px 0 0 0;
     line-height: normal;
     letter-spacing: -1px;
     font-size: 1.2em;
     font-weight: bold;
}
#logo a {
     text-decoration: none;
     color: #AAFF00;
     font-weight: bold;
}
/* RSS */
#rss {
     padding: 30px 39px 20px 0;
     text-align: right;
}
#rss a {
     padding: 0 0 3px 24px;
     background: url(images/img03.gif) no-repeat;
     text-decoration: none;
     font-weight: bold;
}
#rss a:hover {
     text-decoration: underline;
}
/* Search */
#search {
     float: right;
     width: 200px;
     height: 28px;
     background: #FFFFFF url(images/img02.gif) no-repeat;
}
#search #x {
     display: none;
}
#search #s {
     padding: 6px 5px 5px 35px;
     width: 160px;
     height: auto;
     background: none;
     border: none;
     font: normal 1em Arial, Helvetica, sans-serif;
     color: #000;
}
#search br {
     display: none;
}
/* Menu */
#menu {
     width: 950px;
     height: 60px;
     margin: 0 auto;
     background: #6AA2FD url(images/img04.gif);
}
#menu ul {
     margin: 0;
     padding: 0;
     list-style: none;
}
#menu li {
     display: inline;
     text-transform: uppercase;
}
#menu a {
     display: block;
     float: left;
     background: url(images/img15.gif) no-repeat right 100%;
     padding: 18px 30px 0 30px;
     text-decoration: none;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1em;
     font-weight: bold;
     color: #FFFFFF;
}
#menu a:hover {
     height: 60px;
     background: url(images/img16.gif) repeat-x right 30%;
     color: #000000;
}
#menu .current_page_item {
}
#menu .current_page_item a {
     color: #FFFFFF;
}
/* Page */
#page {
     width: 890px;
     margin: 0 auto;
     padding: 30px 0;
}
/* Ads */
#ads {
     float: right;
     width: 160px;
     padding: 0 0 0 20px;
}
/* Content */

#content {
     float: left;
     width: 430px;
}
.post {
     margin-bottom: 50px;
}
.post .title {
}
.post .title h2 {
     font-size: 2.2em;
}
.post .title p {
     margin: 0;
     line-height: normal;
     color: #BABABA;
}
.post .title p a {
     color: #BABABA;
}
.post .entry {
     padding-top: 30px;
}
.post .links {
     width: 410px;
     height: 29px;
     margin: 0;
     padding: 6px 0 0 20px;
     background: #F3F3F3 url(images/img08.gif) no-repeat;
}
.post .links a {
     padding: 0 23px;
     text-decoration: none;
     font-weight: bold;
}
.post .links a:hover {
     text-decoration: underline;
}
.post .links .more {
     background: url(images/img09.gif) no-repeat;
}
.post .links .comments {
     background: url(images/img10.gif) no-repeat;
}
/* Sidebar */
#sidebar {
     float: right;
     width: 240px;
}
#sidebar ul {
     margin: 0;
     padding: 0;
     list-style: none;
}
#sidebar li {
     margin-bottom: 20px;
     backgrounda: #F3F3F3 url(images/img13.jg) repeat-y left top;
}
#sidebar li ul {
     padding: 15px 20px;
     line-height: 200%;
}
#sidebar li li {
     margin: 0;
     padding-left: 15px;
     background: url(images/img07.gif) no-repeat 0 11px;
}
#sidebar h2 {
     width: 210px;
     height: 30px;
     padding: 5px 0 0 30px;
     background: #FFB700 url(images/img05.gif);
     letter-spacing: -1px;
     font-size: 1.6em;
     color: #FFFFFF;
}
/* Calendar */
#calendar_wrap {
     padding: 15px 20px;
}
#calendar table {
     width: 100%;
     background: #1F1F1D;
     border: 1px solid #11110F;
     text-align: center;
}
#calendar thead {
     background: #161616;
}

#calendar tbody td {
     background: #0F0F0D;
     border: 1px solid #11110F;
}

#calendar #prev {
     text-align: left;
}
#calendar #next {
     text-align: right;
}

#calendar tfoot a {
     text-decoration: none;
     font-weight: bold;
}
#calendar #today {
     background: #121210;
     border: 1px solid #11110F;
     font-weight: bold;
     color: #AAFF00
}
 /* Footer */
 #footer {
     clear: both;
     width: 950px;
     margin: 0 auto;
     padding: 30px 0;
     background: url(images/img11.gif) no-repeat;
}
#footer p {
     margin: 0 0 5px 0;
     text-align: center;
     line-height: normal;
     font-size: .9em;
}
#footer a {
     text-decoration: none;
}

Kita mulai membuat function controller dan disimpan dengan nama file c_pages.php
<?
class C_pages extends CI_controller {
     function index () {
           $this ->load->helper("form");
           $this ->load->helper("url");
           $this ->load->helper("html");
           $this->load->view("v_default");
     }
}
?>
Kemudian kita buat view-view yang akan di gunakan untuk tampilannya.
Simpan dengan nama file v_header.php
!-- start header -->
<div id="wrapper">
<div id="header">
     <div id="logo">
           <h1><a href="#">POEKNAPEUTING</a></h1>
           <p><a href="http://www.freecsstemplates.org/">KU CSS TEMPLATE GRATIS</a></p>
     </div>
     <div id="rss"><a href="#">Subscribe to RSS Feed</a></div>
     <div id="search">
           <form id="searchform" method="get" action="">
                <fieldset>
                     <input type="text" name="s" id="s" size="15" value="" />
                     <input type="submit" id="x" value="Search" />
                </fieldset>
           </form>
     </div>
</div>
<!-- end header -->
<div id="menu">
     <ul>
           <li class="current_page_item"><a href="#">Home</a></li>
           <li><a href="#">Blog</a></li>
           <li><a href="#">Photos</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
     </ul>
</div>

Kemudian simpan dengan nama v_content.php
<!-- start content -->
     <div id="content">
           <div class="post">
                <div class="title">
                     <h2><a href="#">About this Template</a></h2>
                     <p><small>Posted on August 15, 2011 by <a href="#">Latihan menggunakan CSS</a></small></p>
                </div>
                <div class="entry">
                     <p><img src="../../public/images/banjir.jpg" alt="" width="112" height="112" class="left" />Ieu teh template anu temana <strong>Tingalieun Peuting</strong>, anu ngagunakeun script CSS Gratisan ku <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. anu di rilis ku <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, mangga ah geura cobian hatur lumayan kanggo latihan :)</p>
                     <p>templet ieu tiasa di tingali di <a href="http://www.freewpthemes.net/preview/level2/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
                </div>
                <p class="links"> <a href="#" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="#" class="comments">No Comments</a> </p>
           </div>
           <div class="post">
                <div class="title">
                     <h2><a href="#">Contoh Tag </a></h2>
                     <p><small>di post keun kaping  15 Agustus, 2011 ku <a href="#">Free CSS Templates</a></small></p>
                </div>
                <div class="entry">
                     <h3>dinu H3 bawaan hideung lestreng:</h3>
                     <blockquote>
                           <p>&#8220;ukuran anu di gunakeun pikeun tulisan ieu ngagunakeun format H3.&#8221;</p>
                     </blockquote>
                     <h3>Bulleted List:</h3>
                     <ul>
                           <li>Poekpeuting caang bulan .</li>
                           <li>Caang beurang panonpoe .</li>
                           <li>Bulet anu di gunakeun.</li>
                     </ul>
                     <h3>Numbered List:</h3>
                     <ol>
                           <li>Nomor Hiji .</li>
                           <li>Nomor dua .</li>
                           <li>Nomor tilu jeung saterusna</li>
                         <li>dst..</li>
                     </ol>
                </div>
                <p class="links"> <a href="#" class="more">Read More</a> &nbsp;&nbsp;&nbsp; <a href="#" class="comments">No Comments</a> </p>
           </div>
     </div>
     <!-- end content -->

Kemudian simpan dengan nama v_sidebar.php
                <div id="sidebar">
           <ul>
                <li id="categories">
                     <h2>Categories</h2>
                     <ul>
                           <li><a href="#">Lorem Ipsum</a> (1) </li>
                           <li><a href="#">Uncategorized</a> (4) </li>
                     </ul>
                </li>
                <li id="calendar">
                     <h2>Calendar</h2>
                     <div id="calendar_wrap">
                           <table id="wp-calendar" summary="Calendar">
                                <caption>
                                August 2011
                                </caption>
                                <thead>
           <tr>
           <th abbr="Monday" scope="col" title="Monday">M</th>
           <th abbr="Tuesday" scope="col" title="Tuesday">T</th>
           <th abbr="Wednesday" scope="col" title="Wednesday">W</th>
           <th abbr="Thursday" scope="col" title="Thursday">T</th>
           <th abbr="Friday" scope="col" title="Friday">F</th>
           <th abbr="Saturday" scope="col" title="Saturday">S</th>
           <th abbr="Sunday" scope="col" title="Sunday">S</th>
           </tr>
                                </thead>
                                <tfoot>
<tr>
<td abbr="July" colspan="3" id="prev"><a href="#">&laquo; Jul</a></td>
<td class="pad">&nbsp;</td>
<td abbr="September" colspan="3" id="next" class="pad"><a href="#">Sep &raquo;</a></td>
</tr>
                                </tfoot>
                                <tbody>
                                     <tr>
                                     <td colspan="2" class="pad">&nbsp;</td>
                                        <td>1</td> <td>2</td> <td>3</td><td>4</td> <td>5</td>
                                     </tr>
                                     <tr>
                                     <td>6</td><td>7</td><td>8</td> <td>9</td> <td>10</td>
                                      <td>11</td><td>12</td>
                                     </tr>
                                     <tr>
                                       <td>13</td> <td>14</td> <td id="today">15</td>
                                       <td>16</td><td>17</td> <td>18</td> <td>19</td>
                                     </tr>
                                     <tr>
                                       <td>20</td><td>21</td><td>22</td> <td>23</td>
                                       <td>24</td><td>25</td><td>26</td>                            </tr>
                                     <tr>
                                       <td>27</td><td>28</td><td>29</td><td>30</td>
                                           <td>31</td>
                                     <td class="pad" colspan="2">&nbsp;</td>
                                     </tr>
                                </tbody>
                           </table>
                     </div>
                </li>
                <li>
                     <h2>Lorem Ipsum Dolor</h2>
                     <ul>
                     <li><a href="#">Nulla luctus eleifend purus</a></li>
                     <li><a href="#">Praesent  scelerisque erat</a></li>
                     <li><a href="#">Ut nonummy rutrum semuot</a></li>
                     <li><a href="#">Pellentesque  quam quis nulla</a></li>
                     <li><a href="#">Fusce ultrices fringilla metus</a></li>
                     <li><a href="#">Praesent  condimentum nisl</a></li>
                     </ul>
                </li>
                <li>
                     <h2>Ultrices Fringilla Metus</h2>
                     <ul>
                     <li><a href="#">Nulla luctus eleifend purus</a></li>
                     <li><a href="#">Praesent  scelerisque erat</a></li>
                     <li><a href="#">Ut nonummy rutrum semuot</a></li>
                     <li><a href="#">Pellentesque  quam quis nulla</a></li>
                     <li><a href="#">Fusce ultrices fringilla metus</a></li>
                     <li><a href="#">Praesent  condimentum nisl</a></li>
                     </ul>
                </li>
           </ul>
     </div>

Kemudian simpan dengan nama file v_footer.php
<div id="footer">
     <p class="legal">
           &copy;2011 POEKNAPEUTING&nbsp;&nbsp;&bull;&nbsp;&nbsp;
           Di Disgn ku <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>
           &nbsp;&nbsp;&bull;&nbsp;&nbsp;
           Icons ku <a href="http://famfamfam.com/">FAMFAMFAM</a>. </p>
     <p class="links">
           <a href="http://validator.w3.org/check/referer" class="xhtml" title="This page validates as XHTML">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a>
           &nbsp;&bull;&nbsp;
           <a href="http://jigsaw.w3.org/css-validator/check/referer" class="css" title="This page validates as CSS">Valid <abbr title="Cascading Style Sheets">CSS</abbr></a>
     </p>
</div>

Kemudian kita buat file view html-nya dengan nama v_default.php
<html>
     <head>
           <title><? $apptittle; ?></title>
<link href="<?php echo base_url() ?>public/css/default.css" rel="stylesheet" type="text/css" media="screen" />
     </head>
     <body>
     <div id="header"><? $this->load->view("v_header"); ?></div>
     <div id="sidebar"><? $this->load->view("v_sidebar"); ?></div>
     <div id="content"><? $this->load->view("v_content"); ?></div>
     <div id="footer"><? $this->load->view("v_footer"); ?></div>
     </body>
</html>

Maka jika kita run dengan url http://localhost/webci202/index.php/c_pages/ akan terlihat seperti gambar :


Selanjutnya kita akan membuat tampilan form login dan jika berhasil akan memanggil tampilan diatas.
Kita mulai dengan menambah function form pada controller di file c_pages.php

     function form ($nmform) {
           $this ->load->helper("url");
           $this ->load->helper("html");
           $appdata["vhome"] = $nmform;
           $this->load->view("v_default1", $appdata);
     }

Kemudian buat view pendukung  header, content, sidebar dan footernya

<!-- start header -->
<div id="wrapper">
<div id="header">
  <div id="logo">
           <h1><a href="#">POEKNAPEUTING</a></h1>
       <p>&nbsp;</p>
     </div>
     </div>
Simpan dengan nama v_header1.php

<!-- start content -->
     <div id="content">
           <div class="post">
             <div class="title">
                  <h2>&nbsp;</h2>
                </div>
                </div>
           <div class="post"></div>
     </div>
     <!-- end content -->
Simpan dengan nama v_content1.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>
Simpan dengan nama v_footer1.php

     <div id="sidebar"></div>
Simpan dengan nama v_sidebar1.php

Kita buat v_difault1.php  sebagai view html nya
<html>
     <head>
           <title><? $apptittle; ?></title>
     <link href="<?php echo base_url() ?>public/css/default.css" rel="stylesheet" type="text/css" media="screen" />
     </head>
     <body>
     <div id="header"><? $this->load->view("v_header1"); ?></div>
     <div id="sidebar"><? $this->load->view("v_sidebar1"); ?></div>
     <div id="content"><? $this->load->view($vhome); ?></div>
     <div id="content"><? $this->load->view("v_content1"); ?></div>
     <div id="footer"><? $this->load->view("v_footer1"); ?></div>
     </body>
</html>

Kemudian file v_login1.php
<?
$this ->load->helper("form");
echo form_open("c_pages/index/v_userdata");
echo "Username : ".form_input("nama");
echo br();
echo "Password : ".form_password("passw");
echo br();
echo form_submit("btnsubmit","Login");
echo form_close();
?>

Dan terakhir kita buat v_userdata.php
<?
echo "Username : ".$nama;
echo br();
echo "Password : ".$passw;
?>

Maka jika kita run dengan URL http://localhost/webci202/index.php/c_pages/form/v_login1 akan terlihat pada gambar

Dan jika kita klick login maka akan muncul


selamat mencoba... Insya Allah selanjutnya saya akan membahas conecting to database hehehehe( sambil membuka paririmbon)