Tuesday, February 19, 2019

Trik Menggunakan Jquery UI datepicker

Assalamualakum....
Sahabat Pojok Code semua bagaimana kabarnya? semoga dalam keadaan baik-baiksaja. Seperti kita ketahui saat ini dunia IT berkembang dengan sangat pesat, hal ini ditunjang dengan semakin meluasnya jaringan internet bahkan sudah sampai ke pelosok-pelosok desa. Sebagai seorang programmer kita harus bisa menyajika tampilan-tampilan yang ramah terhadap pengguna, dan membuat pengguna nyaman berlama-lama dengan system. Dengan dasar itu saya akan sharing mengenai Trik Mengunakan Jquery UI datepicker, sudah pada taukan dan tidak asing lagi. bisa dibayangkan jika kita melakukan input tanggal secara manual. Akan sangat membosannkan dan sangat riskan salah input. Oleh karena itu tutorial ini hadir buat kamu..

Daftra ini postingn kali ini.
  1. Sekilas dan gambaran umum
  2. Kebutuhan dan mateial pendukung
  3. Default JQuery datepicker
  4. JQuery Datepicker dengan format tanggal
  5. JQuery Datepicker dengan pilihan bulan dan tahun
  6. JQuery Datepicker dengan click button
  7. Jquery Datepicker dengan custom button
Untuk gambaran unum saya kira penjelasan diatas sudah cukup. Sekarang kita akan melangkah ke bagian yang kedua yaitumateial pendukung, supaya prijek kita kali ini berjalan dengan lancar kita membutuhkan
  • Jquery bisa download dari Jquery.com
  • jquery UI bisa download langsung dari situs resminya
  • Image untuk button
Jika semua kebutuhan sudah disiapkan silahkan susun seperti terlihat pada gambar dibawah ini.


 Selanjutnya buat code pada file index.html

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="jquery-ui/css/jquery-ui.css" />
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery-ui/js/jquery-ui.min.js"></script>
    </head>
    <body>
        <div><center>Pilihan Calendr Dengan JQuery UI</center></div>
        <hr>        
    </body>
</html>

Sekarang kita tambahkan sebuat tabel dengan 2 column untuk merapikan input datepicker yang akan kita buat. Tambahkan code dibawah ini untuk bagian body.

<table width="50%" cellpadding="3" cellspacing="0">
 <tr>
  <td>Calendr Default</td>
  <td>
   <input type="text" name="txtCalender1" id="txtCalender1" class="txtCalender1"/>
  </td>
 </tr>
</table>
<script>
 $(function (){
  $('.txtCalender1').datepicker();
 });
</script>

jika hasil yang ditampilkan seperti dibawah ini, berarti kamu sudah berhasil
 Selanjutnya kita akan membuat datepicker dengan format tanggal,pilihan bulan dan tahun,tombol tambaha, dan custom tombol tambahan.
Buatlah code seperti dibawah ini.

<table width="50%" cellpadding="3" cellspacing="0">
 <tr>
  <td>Calendr Default</td>
  <td>
   <input type="text" name="txtCalender1" id="txtCalender1" class="txtCalender1"/>
  </td>
 </tr>
 <tr>
  <td>Calendr Dengan Format Date</td>
  <td>
   <input type="text" name="txtCalender2" id="txtCalender2" class="txtCalender2"/>
  </td>
 </tr>
 <tr>
  <td>Calendr Dengan Pilihan Bulan dan Tahun</td>
  <td>
   <input type="text" name="txtCalender3" id="txtCalender3" class="txtCalender3"/>
  </td>
 </tr>
 <tr>
  <td>Calendr Dengan Button Default</td>
  <td>
   <input type="text" name="txtCalender4" id="txtCalender4" class="txtCalender4"/>
  </td>
 </tr>
 <tr>
  <td>Calendr Dengan Button custom</td>
  <td>
   <input type="text" name="txtCalender5" id="txtCalender5" class="txtCalender5"/>
  </td>
 </tr>
 <script>
  $(function (){
   $('.txtCalender1').datepicker();
  });
  
  $(function (){
   $('.txtCalender2').datepicker({
    dateFormat : 'dd MM yy'
   });
  });
  
  $(function (){
   $('.txtCalender3').datepicker({
    dateFormat : 'dd MM yy',
    changeMonth: true,
    changeYear: true
   });
  });
  $(function (){
   $('.txtCalender4').datepicker({
    dateFormat : 'dd MM yy',
    changeMonth: true,
    changeYear: true,
    showOn: "button"
   });
  });
  
  $(function (){
   $('.txtCalender5').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd',
    showOn: "button",
    buttonImage: "./calendar.png",
    buttonImageOnly: true,
    buttonText: "Select date"
   });
  });
 </script>
</table>

Sekarang coba jalankan, jika hasilnya seperti dibawah ini kamu sudah berhasil.
Selamat mencoba, semoga membatu. Sampai ketemu di tutorial selanjutnya


Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Friday, February 15, 2019

Menu Horizontal dari DB Menggunakan jQuery & PHP


Assalamualakum....
Bagaimana kabarnya sahabat pojok code eh sahabat blogger semua, mudah-mudahan dalam keadaan sehat walafiat selalu. Sahabat kali ini saya mau share ke kalian cara untuk membut menu horizontal yang dinamis load langsung dari database, sebelumnya saya sudah posting mengeni yang menu vertikalnya dan bisa dilihat di sini Tree menu dinamis load dari DB.

Menu horizontal seperti ini sering sekali kita temukan di website-website atau blog, sebagi programmer sudah selayaknya kamu mengetahui cara-cara ini.

Dafar ini postingn ini:
  1. Gambaran umum
  2. Bahan dan material pendukung
  3. Coding dan programming
  4. Testing dan preview
  5. File Code latihan
Untuk gambaran umum saya rasa penjelasan diatas sudah cukup, sekarang kita akan mengumpulkan apa saja material pendukung untuk projek kita kali ini.
  1. Jquery, untuk jquery kamu bisa download dari situs resminya yaitu jquery.com
  2. Notepad ++ untuk text editornya, tapi jika kamu mengunakan yang lainnya juga bisa seperti sublime text visual studio netbeans dan lain sebagainya.
  3. Lib Jquery Sample menu download dari link berikut https://github.com/mshahbazsaleem/jQSimpleMenu
Setelah semua material pendukung terkumpul, sekarang kita buat database baru, buat tabel baru dan insert datanya, codenya bisa dilihat dibawah ini.
CREATE TABLE `menu` (
    `id_menu` INT(11) NOT NULL AUTO_INCREMENT,
    `parent_id` INT(11) NOT NULL DEFAULT '0',
    `title` VARCHAR(200) NOT NULL DEFAULT '0',
    `url` VARCHAR(200) NULL DEFAULT NULL,
    `menu_order` INT(11) NOT NULL DEFAULT '0',
    PRIMARY KEY (`id_menu`)
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB
AUTO_INCREMENT=5
;
setelah tabel baru terbentuk sekarang kita input datanya:
INSERT INTO `menu` (`id_menu`, `parent_id`, `title`, `url`, `menu_order`) VALUES
    (1, 0, 'Beranda\r\n', 'null', 1),
    (2, 0, 'profile', NULL, 2),
    (3, 2, 'Visi', NULL, 3),
    (4, 2, 'Missi', NULL, 0),
    (5, 0, 'Blog', NULL, 4),
    (6, 5, 'Programming', NULL, 5),
    (7, 5, 'Vlog', NULL, 6),
    (8, 6, 'java', NULL, 0),
    (9, 6, 'C++', NULL, 0),
    (10, 0, 'About', NULL, 0);
Setelah databse terbentuk sekarang kita gunakan lib yang sudah kita download tadi, susun direktori seperti terlihat pada gambar dibawah.
Folder CSS, Image dan JS kita gunakan dari lib yang sudah kita download tadi. nah yang kita buat baru adalah bagian DBConnetion.php dan index.php.
Dibawah ini adalah code untuk DBConnection.php

Baca Juga :

class DBConnection { //put your code here private $host = "localhost"; private $dbName = "latihan3"; private $usr = "root"; private $pwd = "root"; public function getConnection() { try { $conn = new PDO("mysql:host=$this->host;dbname=$this->dbName", $this->usr, $this->pwd); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { echo "Connection failed: " . $e->getMessage(); } return $conn; } }
ini code untuk index.php

<?php require_once 'lib/DbConnection.php'; $con = new DBConnection(); $connection = $con->getConnection(); function has_children($rows,$id) { foreach ($rows as $row) { if ($row['parent_id'] == $id) return true; } return false; } function build_menu($rows,$parent=0) { if($parent==0){ $result = '<ul class="menu">'; }else{ $result = '<ul>'; } foreach ($rows as $row) { if ($row['parent_id'] == $parent){ $result.= "<li><a href=\"https://www.pojokcode.com\">{$row['title']}</a>"; if (has_children($rows,$row['id'])) $result.= build_menu($rows,$row['id']); $result.= "</li>"; } } $result.= "</ul>"; return $result; } $sql = "select * from menu"; $stmt = $connection->prepare($sql); $stmt->execute(); $menu = array(); foreach ($stmt->fetchAll() as $k=> $v) { $menu[]=array('id'=>$v['id_menu'],'title'=>$v['title'],'parent_id'=>$v['parent_id']); } ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>menu horizontal</title> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jqsimplemenu.js"></script> <link rel="stylesheet" href="css/jqsimplemenu.css" type="text/css" media="screen" /> <script type="text/javascript"> $(document).ready(function () { $('.menu').jqsimplemenu(); }); </script> </head> <body> <?php echo build_menu($menu); ?> </body> </html>

Jika sudah selesa, sekarang coba jalankan file index.php nya jika menghasilkan seperti tampilan diatas berarti kamu sudah berhasil. Silahkan di modifikasi dan di kembangkan sendiri. Mudah mudahan bermanfaat. Terus belajar dan jika ada pertanyaan silahkan cantumkan pada kolom komentar dibawah. Terima Kasih
Salam

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Thursday, February 14, 2019

Free System Informasi Restoran dengan PHP & MySql

Assalamualakum....
Sahabat pojok code semua bagaimana kabarnya, mudah-mudahan dalam keadaan baik-baik saja. Seperti kita ketahui indonesia merupakan syurganya wisata kuliner, sudah sangat terkenal kemanca negara. Hal ini terbukti dengan menjamurnya restoran-restoran dan rumah makan, hampir disetiap sudut kita bisa melihat resoran atau tempat makan. Dengan alasan itu tentu saja akan berbanding lurus dengan kebutuhan system yang dapat menujang perkembangan sebuah restoran. Kali ini saya mau share ke kalian system informasi restoran berbasis PHP dan MySql atau bisa juga mengunakan MariaDB, karena MySql sekarang sudah tidak open source lagi. Aplikasi ini gratis bisa kalian download tentunya dengan syarat sangat murah hanya subscrebe canel youtube aja, saya rasa ini hal kecil yang tidak sebanding dengan pengalaman ilmu yang akan kalian dapat.

Daftar ini postingan kali ini:
  1. gambaran umum
  2. kebutuhan material
  3. Process Instalasi Database
  4. Process Instalasi code aplikasi
  5. Testing dan preview
  6. Download File aplikasi
Untuk gambaran secara umum kayanya sudah cukup jelas dari gambaran ditas, sekarang kita akan bahas apa saja yang dibutuhkan untuk menjalankan aplikasi ini. Untuk menjalankan aplikasi (system) ini kita membutuhkan
  • PHP versi 5.4 kebawah, jika kamu mengunakan yang diatasnya akan ada error conneksi, karena metide koneksinya hanya support versi 5.4 kebawah. Tapi kalau kamu mau sedikit edit tidak maslalah.
  • Untuk database bisa menukana MySql atau MariaDB, versi yang digunakan untuk ini bebas.
Sekarang kita masuk process istalasi, saya sarankan kamu menggunakan aplikasi xampp, wamp atau palikasi semisalnya, karena dengan pakai ini jadi lebih mudah.
Setelah kamu download file code latihan selanjutnya exstrak dan simpan pada filder htdoc untuk xampp folder www untuk wamp.
baca juga :
Selanjutnya lakukan restore database dari file yang sudah di download tadi, untuk hal ini saya asumsikan kamu sudah bisa melakukan backup dan restore database, jika ada yang belum bisa bisa lihat postingan yang ini restore database. dan rancangan databasenya kurang lebih seperti gambar dibawah ini, database memang masih mengunakan myisam (jadi tidak ada relasi databse)

Jika sudah berhasil resotre tidak bisa langsung jalankan, tapi harus setting conneksinya dulu. Cari file inc.connection.php pada folder library.
Setelah itu buka file tadi dengan mengunakan notepad ++ atau editor sejenisnya. Lakukan penyesuaian dengan setting koneksi database yang kalian sudah setting.


Jika setting sudah selesai save hasil edit dan coba jalankan melalui browser.
http://localhost:8080/resto2/
 nah untuk port sesuaikan dengan port agan jika default hilangkan saja. Jika berhasil maka akan muncul menu untuk login.

Silahkan coba login dengan dua account
  • Admin
user : admin
pass : admin
level: admin
  • kasir
user : kasir
pass : kasir
level : kasir

ini adalah tampilan admin

dan ini adalah tampilan untuk kasir.


tampilan transaksi pembelian.
Tampilan transaksi penjualan
Untuk lebih jelasnya silahkan download file latihan dari link di bawah ini :

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Tuesday, February 12, 2019

Collapsible Sidebar Mengunakan Bootstrap



Assalamualakum....
Sahabat pojok code semua, bagaimana kabarnya? mudah-mudahan dalam keadaan baik baik saja. Saat ini ketika kita mengunjungi sebuah halaman wesite sudah tidak jamanya lagi static (hanya bisa tampil versi desktop) pas kita buka dengan mobile harusnya langsung menyesuaikan istilah kerenya responsive. Oleh sebab itu dipostingan kali ini saya mau share sebuah desain tampilan Home yang bisa menyesuaikan denan ukuran layar dan juga side menu yang bisa di buka tutup sesuka pengguna.
 Daftar ini postingan:
  1. Gambaran umum
  2. Material yang dibutuhkan
  3. Process Coding
  4. Testing dan preview
  5. File Code Latihan
Gambaran umum sudah dijelaskan pada bagian paling atas, sekarang kita akan bahas apa saja yang dibutuhkan untuk membuat halaman seperti ini.

Material yang dibutuhkan

 Untuk menunjang process pembuatan halaman seperti gambar diatas, kita membutuhkan
  1. Jquery, untuk ini bisa download dari situs reminya jquery.com
  2. bootstrap 4.1.0 ini juga bisa download dari situs resminya
  3. Fontawesome ini juga bisa download versi freenya
  4. popper ini juga bisa didownlod, 
semua kebutuhan material bisa anda download langsung dari file latihan dibawah, atau bisa juga download sendiri dari situs resminya.

Process Codeing dan Programming 

Buatlah dua buah file index.html dan style.css
buat code pada file index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <title>Collapsible sidebar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <script defer src="use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
  <script defer src="use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
 </head>
 <body>
  <div class="wrapper">
   <nav id="sidebar">
    untuk menu sidebar
   </nav>
   <div id="content" >
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
     untuk menu top
    </nav>
    <div class="container-content" >
     untuk content
    </div>
    <footer>
      untuk footer
    </footer>
   </div>
  </div>
  <script src="code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>  
 </body>
</html>

karena process penulisan code jadi error postingan :D lihat langsung aja dari file latihan ya

Lihat juga :
tapi ini code untuk file CSS


/*
    DEMO STYLE
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
    perspective: 1500px;
}


#sidebar {
    min-width: 250px;
    max-width: 250px;
    /*background: #7386D5;
    color: #fff;*/
 background:#eeeeee;
    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    transform-origin: bottom left;
}

#sidebar.active {
    margin-left: -250px;
    transform: rotateY(100deg);
}

#sidebar .sidebar-header {
    /*padding: 20px;*/
 height:70px;
 text-align:center;
 padding: 18px;
 background:#f8f9fa;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
#sidebar ul li a:hover {
    /*color: #7386D5;
    background: #fff;*/
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    /*color: #fff;
    background: #6d7fcc;*/
}


a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    /*background: #6d7fcc;*/
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    /*color: #7386D5;*/
}

a.article, a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}



/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    width: 100%;
    /*padding: 20px;*/
    min-height: 100vh;
    transition: all 0.3s;
}

.navbar-light{
 background: #6d7fcc;
}

.container-content{
 padding:10px;
 min-height: 100vh;
}

#sidebarCollapse {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    cursor: pointer;
}

#sidebarCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}

#sidebarCollapse span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}


#sidebarCollapse.active span {
    transform: none;
    opacity: 1;
    margin: 5px auto;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
        transform: rotateY(90deg);
    }
    #sidebar.active {
        margin-left: 0;
        transform: none;
    }
    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }
    #sidebarCollapse.active span {
        margin: 0 auto;
    }
    #sidebarCollapse.active span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse.active span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse.active span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }

}

/*---------------------------------------
 footer
----------------------------------------*/
footer{
 background-color:#efefef;
}
 


Selanjutnya kita coba jalankan dan preview. Jika halinya seperti gambar diatas berarti sudah berhasil.

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Friday, February 8, 2019

Upload Image Dengan Preview Pada HTML

Assalamualakum wr. wb.....
Sahabat blogger semua, bagaimana kabarnya? tentu saja mudah-mudahan dalam keadaan baik-baik saja. Kali ini saya mau share cara upload gambar pada html tapi ada previewnya. Jadi sebelum image kita submit kita akan mengetahui image mana yang sudah kita upload.
Daftar isi :
  1. Deskripsi umum (sudah kita jelaskan diatas)
  2. Material yang dibutuhkan
  3. Coding dan Programming
  4. Testing dan View Hasil
  5. Berkas Latihan
Sekarang kita akan mulai mengumpulkan material yang dibutuhkan untuk memulai latihan ini.
  1. Siapkan library JQuery, kamu bisa download dari jquery.com atau klik link dibawah ini JQUERY
  2. Siapkan Text Editor atau IDE (integrated development environment) kamu bisa mengunakna Notepad ++, sublime text, visual studo code atau Netbeans
  3. Siapkan File image yang akan digunakan untuk testing nantinya
Ok, jika semua material sudah disiapkan sekarang kita akan memulai pembuatan coding. Disini saya mengunakan Netbeans untuk process pembuatan.
Klik file new projek, projek yang dibuat boleh PHP atau HTML.
Selanjutnya buatlah susuan folder seperti terlihat pada gambar dibawah:
Simpan image untuk value image ketika belum di lakukan upload pada folder img.
simpan file jquery,min.js pada folder lib
Selanjutnya buatlah code pada file indexnya.

Lihat Juga :

Pertama kita panggil jquery dari filder lib kedalam projek kita.


<script src="../lib/jquery.min.js" type="text/javascript"></script>

Selanjutnya buat code pada bagian body

<table width="80%">
 <tr>
  <td width="10%" align="right">Image :</td>
  <td width="80%">
   <input type="file" name="txtFoto" id="txtFoto" onchange="readURL(this);"/>
  </td>
 </tr>
 <tr>
  <td></td>
  <td>
   <div align="left"><img id="blah" class="img-style" src="../img/no-image.png" />
   </div>
  </td>
 </tr>
 <tr>
  <td width="10%" align="right">Nama :</td>
  <td width="80%">
   <input type="text" name="txtNana" id="txtNama" size="50"/>
  </td>
 </tr>
 <tr>
  <td width="10%" align="right">Alamat :</td>
  <td width="80%">
   <textarea></textarea>
  </td>
 </tr>
</table>

Kemudian buatlah file CSS pada bagian head untuk menyesuaikan tampilan preview nantinya
 
<style>
 .img-style{
  background-color: #eee;
  border: 1px solid #ccc;
  width: 150px;
  height: 150px;
  border-radius: 3px;
  box-shadow: 0 0 0 #999;
 }
</style>

Selanjutnya kita akan buat code Javascript dibagian bawah code tampilan

<script>
 function readURL(input) {
  if (input.files && input.files[0]) {
   if (input.files[0].size / 1024 >= 30000) {
    alert("Ukuran maximal gambar 3 MB");
    document.getElementById("txtFoto").value = null;
   } else {
    var reader = new FileReader();
    reader.onload = function (e) {
     $('#blah').attr('src', e.target.result)
    };
    reader.readAsDataURL(input.files[0]);
   }
  }
 }
</script>

Nah jika sudah selesai kita akan coba jalankan, klik kana pada file index nya dan run. hasilnya akan muncul dan cobalah upload image, jika image umcul pada tampilan preview maka sudah berhasil
ini adalah tampilan ketika pertama kali dijalankan.
Dan ini tampilan ketika sudah melakukan upload image
Ok segitu aja, selamat mencoba. Untuk file latihannya silahkan download dari link dibawah ini.

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Monday, January 21, 2019

Custom Validasi Input HTML5 Mengunakan Javascript

Assalamualakum wr. wb...

HTML merupakan bagian penting dari pembangunan halaman web, Namun jika hanya mengunakan HTML saja web kita menjadi kurang menarik dan terlihat monoton, untuk itu kita perlu melakukan integrasi antara HTML dan Javascript untuk membuat halamn web menjadi lebih dinamis.

Ada banyak plugin Javascript yang bisa kita gunakan secara gratis, tetapi disini kita akan mengunakan Default javascript (bawaan browser)

Sekarang kita akan menguakan Validasi pada input form HTML. Sebenarnya validasi ini sudah ada pada HTML 5 Kita tinggal mengunakan saja. Tetapi validasi bawaan kadang kurang informatif terutama dari segi bahasa yang digunakan.

contoh penguakan validasi bawaan HTML5
Alert seperti ini bisa kita buat hanya menambahkan atribut requered saja pada komponent HTML
contoh code :
<input maxlength="50" minlength="4" required="" size="25" type="text" />

hampir setiap komponent HTML memiliki atribut ini, jika kamu sudah merasa cukup dengan pesan peringatan ini berarti tidak perlu menambah code lagi.Tapi jika Pesan peringatan ini dirasa pasih kurang cukup maka kamu bisa melakukan modifikasi mengunakan Javascript.
langkahnya sebagai beriut :
Tambahkan tag javascript pada bagian code, contoh disini saya mengukana input type Email


        <script>
            function invalidMsg(textbox){
                if(textbox.value==''){
                    textbox.setCustomValidity('Email Wajib Diisi');
                }else if(textbox.validity.typeMismatch){
                    textbox.setCustomValidity("Email Salah");
                }else{
                    textbox.setCustomValidity("");
                }
                return true;
            }
        </script>

Baca Juga :
Kemudian pada bagian input type kita panggil function javascript yang sudah kita buat tadi, cara panggilnya kita gunakan action type yang dimiliki atribut. Contohnya disini atribut input type Email yaitu oninput dan oninvalid. Jika kita lihat codenya menjadi seperti berikut
 <input oninput="invalidMsg(this)" oninvalid="invalidMsg(this)" type="email" id="email" name="email" required="">

Jika kita tulis code lengkapnya sebagai berikut :

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            <table>
                <tr>
                    <td>Email</td>
                    <td><input oninput="invalidMsg(this)" oninvalid="invalidMsg(this)" type="email" id="email" name="email" required=""></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Submit"</td>
                </tr>
            </table>
        </form>
        <script>
            function invalidMsg(textbox){
                if(textbox.value==''){
                    textbox.setCustomValidity('Email Wajib Diisi');
                }else if(textbox.validity.typeMismatch){
                    textbox.setCustomValidity("Email Salah");
                }else{
                    textbox.setCustomValidity("");
                }
                return true;
            }
        </script>
    </body>
</html>


Sekarang kita coba untuk test validasiny, kita tidak masukan apapun dan tekan tomnbol submit. maka akan muncul pesan peringatan Email Wajib Diisi
Selanjutnya kita akan coba dengan memasukan text bukan email, maka akan muncul pesan peringatan Email Salah
Kemudian kita coba input sesuai format email yaitu ada a keong ( @) dan tanda dot ( . ) contoh asep@pojokcode.com. Ketika kita melakukan input dengan benar barulah kita bisa melakukan submit form dan tidak menerima pesan peringatan.

Kira-kira seperti itu mudah mudahan ada manfaatnya, silahkan dikembangan sesuai dengan kebutuhan kamu..

Terima kasih

Baca Juga:
Untuk lebih jelasnya silahkan simak vidio dibawah ini:

Sunday, July 15, 2018

Template Undangan Pernikahan Online Gratis

gb 1. Home
Undangan dalam acara pernikahan merupakan bagian yang sangat penting, orang akan senang dan respek jika dihargai apalagi kita mengharapkan kedatangannya. Jika undangan kita cetak secara manual (cetak kertas) tentunya membutuhkan biaya yang tidak sedikit jumlah akan berbanding lurus dengan harga yang harus dikeluarkan. Saat ini hampir semua orang sudah mengenal internet jadi sangat tepat sekali jika saat ini kita memanfaatkan teknologi untuk mengurangi biaya yang dikeluarkan. Berbeda dengan cetak manual, undangan yang dibuat online tidak berpengaruh terhadap jumlah orang yang akan kita undang. Untuk hal ini kami menyediakan template gratis Undangan Pernikahan Online.

Jika undangan online ini kita jalankan pertama kali, tampilan akan muncul seperti gb 1 Home diatas. Tampilan Home dapat anda edit, untuk background mengunakan image yang dapat anda ganti sesuai image yang anda kehendaki. Untuk menggantinya cari folder css dan cari file agency.css, seperti image dibawah ini.
gb 2. Folder CSS

Setelah anda temukan buka dengan mengunakan editor yang anda punya, bisa Notepad ++ ataupun yang lainnya. Cari code CSS header. Ubah bgaian code berikut sesuai image yang anda miliki.


header {
    text-align: center;
    color: #fff;
    background-attachment: scroll;
    background-image: url(../img/header-bg.jpg);
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
Selanjutnya untuk ubah data kedua pengantin, anda cari file index.html pada folder undangan
gb 3 Folser Index

Buka file index.html dengan editor anda, cari bisa dengan menekan tombol keyboard CTRL + F  dan masukan key woard undangan pernikahan, pada bagian ini silahkan edit sesuai dengan undangan yang akan anda buat.

<div class="col-md-7 intro-text">
 <div class="intro-lead-in">Undangan Pernikahan</div>
 <div class="intro-heading">09-01-2015</div>
 <div class="col-sm-12 text-center" >
 <div class="col-md-5  ikhwan">
  <h4>Fulan</h4>
  <p>Fulan Fulan</p>
 </div>
 <div class="col-md-1">
  <h1>&</h1>
  </div>
  <div class="col-md-5 akhwat">
   <h4>Fulannah</h4>
   <p>Fulanah Fulanah</p>
  </div>
 </div>
 <div class="col-sm-12">
  <hr style="width:80%;">
 </div>
 <p class="surat"><b style="font-size: 18px;font-style:normal;">BISMILLAHIROHMANIROHIM</b><br>
  "Dan diantara tanda-tanda kekuasaan-Nya adalah diciptakan-Nya untukmu pasangan hidup dari jenismu sendiri,
  supaya kamu mendapat ketenangan hati dan dijadikan-Nya kasih sayang diantra kamu. Sesungguhnya yang demikian
  menjadi tanda-tanda kebesaran-Nya bagi orang-orang yang berfikir."<br>
 QS. Ar Rum : 21</p>
 <center>
  <div class="text-center"
  style="margin-top: 10px;
  width: 250px;
  height: 50px;
  padding 10px;
  text-align:center;
  border-radius: 25px;
  border: 2px solid #fed136;">
   Kepada YTH :<br> Fulan bin fulan
  </div>
 </center>
</div>   
Tampilah Acara sebagai berikut.

Bagian ini adalah bagian data undangan, isinya adalah nama kedua calon pengantin dan ucapan-ucapan untuk mengundang. Bagian ini bisa kamu modifikasi sesuai dengan kebutuhan. Untuk edit bagian ini masih mengunakan file yang sama dengan bagian atas, untuk mencari bagian yang akan di edit tekan CTRL + F dan masukan maha suci allah, selanjutnya text editor akan mengarahkan ke bagian yang anda cari.

Baca Juga:

Tampilan Lokasi sebagai berikut.
Alamat tempat diadakannya walimtul ursy adalah baian yang sangat penting, jangan sampai orang yang akan datang menjadi kebingungan, apalagi kalau alamatnya salah. Untuk bagian ini silahkan dibuat dan di edit sejelas jelasnya. Kalau perlu silahkan include map plugin. Supaya Undangan online menjadi semakin menarik. Untuk process edit sama dengan bagian paling atas.

Tampilan komentar bisa diintegrasikan dengan komentar facebook, gambarannya sbb:
Komentar ini di tempatkan pada bagian bawah undangan, supaya orang-orang yang anda undang bisa memasukan komentarnya setelah membaca semuanya. Pada bagian komentar biasanya berisi ucapan-ucapa untuk kedua calon pengantin.
Bgian ini bisa anda integrasikan dengan Facebook, degnan cara ini komentar menjadi semakin menarik, karena kita bisa mengatahui dengan jelas siapa yang mengisi komentar.

Untuk lebih jelasnya silahkan download dari link dibawah ini :
Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Monday, July 9, 2018

Jquery Fullcalendar Dengan Bootstrap PHP dan MariaDB


Jquery Fullcalender sering kita gunakan terutama yang berhubungan dengan timeline, hal ini membuat tampilan aplikasi semakin menarik. Deangan adanya fullcalender anda bisa mengatur waktu dan terlihat sangat rapi.
Ini adalah tampilan month dari fullcalender yang sudah bisa process CRUD

Tampilan Month Jquery full calender menampilkan semua tanggal dalam satu bulan dalam satu halaman. Jika kita lihat jadual yang sudah dibuat pada tidap tanggal akan disusun sesuai dengan apa yang sudah kita buat pada tanggal tersebut.
Untuk menambahkan jadual baru kita bisa klik bagian tanggal, selanjutnya akan muncul popup input yang bisa kita isi untuk jadual baru.
Untuk edit jadual kita bisa melakukan klik 2 kali pada bagian list jadual yang tersusun pada tiap tanggalnya. Nanti akan muncul popup untuk melakukan edit. Pada saat yang sama kita juga bisa melakukan delete dengan ceklis fungsi delete pada popup yang muncul.
Jika kita ceklis pungsi delete dan kita lakukan submit maka jadual itu akan terhapus pada jquery full calender.
Baca Juga :


Ini adalah tampilan full calender day
Tampilan Day pada Jquery full calender lebih memperjelas jadual kita pada hari itu. Kotak-kotak warna yang muncul akan mencerminkan waktu jadual yang sudah kita setting. Untuk menampilkan ini kita tinggal klik tombol day pada bagian atas Jquery Full Calender.
Pada bagian ini kita juga bisa menambahkan mengedit dan menghapus jadual. Caranya hampir mitip dengan Tab bagian Month, Hanya saja pada bagian ini kita tidak bisa memilih tangal yang berbeda, kita hanya bisa meilih tangal yang sudah kita pilih saja.

Ini adalah tampilan full calender list

Bagian List Jquery Full Calender cukup menarik buat saya, karena kita bisa melihat list jadual yang kita buat yang di kelompokan setiap harinya dan disusun selama 1 minggu.
Pada bagian ini kita tidak bisa melakukan edit, pada bagian ini kita hanya bisa melihat list jadual yang sudah kita buat saja, Hal ini tidak menjadi maslah karena edit bisa kita lakukan di tab yang lain.



Untuk lebih jelasnya silahkan download dari tombol dibawah ini.

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Friday, July 6, 2018

Template Toko Online Dengan Bootstrap

Hai Blogger Semua, tidak bisa kita pungkiri saat ini orang-orang lebih suka belanja online dari pada dateng ke toko langsung. Banyak alasan yang di sampaikan, ada yang males karena macet ada yang males karena jauh panas dan lain sebagianya.

Untuk hal ini saya sediakan template toko online dengan bootstrap. Tadinya ini mau saya selesaikan terlebih dahulu tapi keburu banyak kerjaan, jadi di bagi aja dulu siapa tau ada yang mau melanjutkan dan share balik ke saya :D :D.

Template ini mengunakan Bootstrap dan library lainnya.  Saya berharap kalian bisa mengembangkan template ini seperti market place yang popular saat ini, Jadi tidak hanya bisa jualan barang saja, Harapaanya bisa berkomunikasi dengan aplikasi lainya. Seperti pembayaran Listrik, Pean tiket kereta, pesan tiket peawat dan lain sebagainya.

Dan satu lagi untuk jenis pilihan pengiriman juga sebaiknya langsung otomatis sinkronisasi dengan API lainya seperti JNE, POS dan lain sebagainya.

Dari segi bahasa, toko online berasal dari dua suku kata, Toko dan Online. Menurut Kamus Besar Bahasa Indonesia, toko berarti sebuah tempat atau bangunan permanen untuk menjual barang-barang (makanan, minuman, dan sebagainya).  Sedangkan Online yang terjemahan bahasa indonesianya adalah dalam jaringan atau disingkat daring, menurut Wikipedia adalah keadaan di saat seseorang terhubung ke dalam suatu jaringan ataupun sistem yang lebih besar. Jadi berangkat dari dua pengertian secara bahasa tersebut kita dapat mengartikan toko online sebagai tempat terjadinya aktifitas perdagangan atau jual beli barang yang terhubung ke dalam suatu jaringan dalam hal ini jaringan internet. Aktifitas ini biasa juga disebut Belanja Online.

Ketika kita melakukan transaksi di sebuah toko, kita bebas memilih barang yang akan kita beli. Terkadang kita perlu memasukkan barang yang kita beli ke dalam keranjang belanja lalu kita menyerahkan keranjang belanja tersebut kepada kasir untuk dihitung total belanja kita. Sama seperti transaksi di toko biasa, di toko online proses transaksi yang kita lakukan tidak jauh berbeda. Bila di toko biasa kita dilayani oleh manusia, di toko online kita dilayani oleh mesin.

Baca Juga :

File ini sudah ber extensi PHP jadi harus di buka selayaknya program PHP.
Beberapa hal yang perlu di perhatikan juga mungkin akan error jika di buka oleh versi PHP 7. Karena ketika dibuat masih mengunakan versi 5.4


Untuk lebih jelas silahkan langsung download dari link di bawah ini.





Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Thursday, July 5, 2018

Tree Menu Dinamis Dengan PHP MySQL dan JSTree


Assalamualakum wr.wb...
Hai blogger semua, kesempatan ini  saya akan sharing cara membuat Three Menu Dinamis Dengan PHP MySQL dan JSTree.
Tampilan menu berbentuk pohon atau sering disebut tree menu dapat membuat menu yang begitu banyak lebih terlihat sedrhana, Cara ini banyak digunakan oleh para pengembang aplikasi atau pengembang software.
Oleh karena itu saya rasa share tutorial untuk membuat tree menu bisa bermanfaat buat yang membutuhkan, terutama bagi yang baru belajar pertman kali.
Tidak usah berlama lama langsung saja kita praktek.
Pertama buat database baru dengan nama dynamicmenu dan tabel baru dengan nama simmenu. Database dynamicmenu ini yang nanti akan kita gunakan untuk menyimpan tabel simmenu dan tabel simmenu ini yang akan kita gunakan untuk menampung seluruh data menu yang akan kita buat.
Pertanyaannya kenapa kita mengunakan tabel tidak ditulis manual saja pada sourcecode?

Alasannya dengan cara disimpan pada database ini atau tabel kita bisa membuat setting menu lebih dinamis. Kita bisa membuat relasi tabel dengan hak acess tiap pengguna. Dibandingkan dengan menyimpan langsung pada code program, Cara ini jauh lebih sederhana dan lebih mudah.

Detail silahkan download detail pada tombol dibawah.

Baca Juga:

Selanjutnya buat projek baru dengan susunan direktory seperti gambar berikut.

File DBConnection kita gunakan untuk melakukan koneksi dengan database dan tabel yang sebelumnya kita sudah buat. Oh iya untuk design tabel dan susunan field atau isi data bisa kamu langusng download saja pada file dibawah, jika di tulis disini rasanya akan terlalu panjang.

Source Code DBConnection.php


class DBConnection {

    //put your code here
    private $host = "localhost";
    private $dbName = "dynamicmenu";
    private $usr = "root";
    private $pwd = "root";

    public function getConnection() {
        try {
            $conn = new PDO("mysql:host=$this->host;dbname=$this->dbName", $this->usr, $this->pwd);
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        } catch (PDOException $e) {
            echo "Connection failed: " . $e->getMessage();
        }
        return $conn;
       
    }
   

}

File MenuDao.php akan kita gunakan untuk melakukan manipulasi database diantaranya select, insert update dan delete kalau orang sering bilang CRUD. Cara ini mungkin bagi kamu yang tidak biasa mengunakan OOP akan sedikit bikin pusing, tapi jika sudah biasa cara ini malah membuat program kita menjadi lebih terstruktur. Tiap hal yang berhubungan dengan data acess object akan dilakukan disini (tidak ada select pada halaman tampilan).
Code MenuDao.php

class MenuDao {

    private $connection;

    //put your code here
    public function __construct() {
        $con = new DBConnection();
        $this->connection = $con->getConnection();
    }
    
    function __destruct() {
        $this->connection =null;
    }
    
    public function getMenuById() {
        try {
            $listmenu = array();
            $sql = "select * from simmenu where is_active=1 order by ordered";
            $stmt = $this->connection->prepare($sql);
            $stmt->execute();
            foreach ($stmt->fetchAll() as $k => $v) {
                $menu = new Menu();
                $menu->setMenuId($v['menu_id']);
                $menu->setMenuName($v['menu_name']);
                $menu->setParent($v['parent']);
                $menu->setIcon($v['icon']);
                $menu->setLink($v['link']);
                $listmenu[] = $menu;
            }
            return $listmenu;
        } catch (Exception $exc) {
            echo $exc->getTraceAsString();
        }
    }

}

File Menu.php kita gunakan untuk menampung objek menu, nantinya setiap process baik mengambil data atau mengirim data akan selalu melibatkan objek ini.
Code Menu.php

class Menu {
    //put your code here
    private $menuId;
    private $menuName;
    private $parent;
    private $icon;
    private $link;
    private $selected;
    
    function getSelected() {
        return $this->selected;
    }

    function setSelected($selected) {
        $this->selected = $selected;
    }
    
    function getMenuId() {
        return $this->menuId;
    }

    function getMenuName() {
        return $this->menuName;
    }

    function getParent() {
        return $this->parent;
    }

    function getIcon() {
        return $this->icon;
    }

    function getLink() {
        return $this->link;
    }

    function setMenuId($menuId) {
        $this->menuId = $menuId;
    }

    function setMenuName($menuName) {
        $this->menuName = $menuName;
    }

    function setParent($parent) {
        $this->parent = $parent;
    }

    function setIcon($icon) {
        $this->icon = $icon;
    }

    function setLink($link) {
        $this->link = $link;
    }

}

File index.php nah pada file ini baru akan dilakukan process penggabungan semuanya dari file-file yang suah kita buat sebelumnya sekaligus kita tampilkan hasilnya.
code index.php

    require_once './config/DBConnection.php';
require_once './model/Menu.php';
require_once './dao/MenuDao.php';
$menudao = new MenuDao();
$menuById = $menudao->getMenuById();
//untuk mendapatkan menu
function has_children($rows, $id) {
    foreach ($rows as $row) {
        if ($row->getParent() == $id)
            return true;
    }
    return false;
}

function build_menu($rows, $parent = 0) {
    $result = "
    "; foreach ($rows as $row) { if ($row->getParent() == $parent) { if ($row->getLink() == "") { $result .= "
  • {$row->getMenuName()}"; } else { $result .= "
  • getLink()}')\">{$row->getMenuName()}"; } if (has_children($rows, $row->getMenuId())) $result .= build_menu($rows, $row->getMenuId()); $result .= "
  • "; } } $result .= "
"; return $result; }




Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :