Monday, January 30, 2017

Tutorial Opencart : Cara Cepat Membuat Toko Online Sendiri

View Article
Cara membuat toko online sendiri
Opencart
Banyak orang berfikir bahwa membuat toko online pasti lama dan mahal. Ya., jika membuat toko online sendiri dari awal memang lama. Butuh waktu untuk membuat  koding halaman produk dan halaman administrator. Tapi jika kamu membuat toko online menggunakan CMS(Content Management System) hanya butuh waktu 10 menit dan gratis (diluar domain hosting). Salah satu CMS yang saya bahas kali ini ada CMS Opencart.

Apa itu Opencart?
Opencart merupakan salah satu CMS open source berbasis PHP yang biasanya digunakan untuk membangun shopping cart atau toko online. Opencart memberikan banyak kemudahan pengguna untuk membuat shopping cart sesuai kebutuhan, kerena di dalam Opencart sudah terdapat halaman pengunjung (front-end) untuk menampilkan produk dan halaman administrator(back-end). Untuk fitur-fitur Opencart bisa anda lihat langsung di situs resminya www.opencart.com

Bagaimana cara install Opencart di localhost?
1. Untuk memulai installasi silahkan download Opencart di www.opencart.com
2. Extra file zip yang telah di download tadi.
3. Masuk kedalam folder, copy folder 'upload' kemudian paste pada directory htdocs.
4. Masuk folder 'upload', cari  file 'config-dist.php' ubah nama/rename menjadi 'config.php' tanpa tanda kutip.
5. Didalam folder 'admin' juga terdapat 'config-dist.php'. Sama seperti diatas, rename menjadi 'config.php'.
6. Ganti nama folder 'upload' dengan nama domain toko online kamu. Contoh : toko-online
7. Pada browser ketik localhost/phpmyadmin. Buat database baru. contoh : db_toko_online.
8. Pastikan Service Apache dan Service MySQL sudah running. Pada browser, ketik localhost/upload.
9. Jika berhasil maka akan tampil halaman installasi Opencart. Untuk melanjutkan klik tombol 'Continue'.
10. Pastikan status semua berwarna hijau. Jika masih ada yang berwarna merah. Set Permision foldernya agar bisa di Read and Write. Kemudian klik tombol 'Continue'.
11. Isikan nama database pada kolom database. Kemudian kebawah, isikan kolom username, kolom password dan email. Lanjutkan dengan mengklik tombol 'Continue'
12. Terakhir hapus folder 'Intall'

Untuk lebih jelas silahkan tonton video dibawah ini :


Sekian untuk posting kali ini. Untuk cara mengganti template Opencart akan saya bahas pada posting berikutnya. Terima Kasih

Wednesday, October 5, 2016

Tutorial Ionic : Movie Online Streaming Application Menggunakan Ionic Framework, PHP, MySQL dan Dropbox

View Article

Pada posting kali ini saya akan membagikan source code movie online streaming application yang  dibuat menggunakan Ionic Framework, PHP, database MySQL dan untuk host filmnya saya upload di Dropbox.com.  Awalnya saya menggunakan google drive sebagai host film, namun setelah saya coba ternyata google drive mengharuskan pengguna untuk login ke gmail agar dapat memutar film yang tersimpan di google drive. Maka dari itu saya memilih menggunakan Dropbox.com sebagai host film. Silahkan register pada situs resminya : klik disini.

Sebelum lanjut ke penjelasan movie online streaming application menggunakan ionic framework, PHP, database MySQL pastikan anda sudah menginstall perangkat lunak yang dibutuhkan. Ionic Framework.

Database :
Nama database : db_cinema1

Tabel : tb_movie

tb_movie

Field

Type

Primary

Extra

id_movie

bigint(20)

Ya

Auto_increment

title

text





category

varchar(100)





cover

text





url

text





tgl_upload

date





Web service :
Web service disini berfungsi untuk menghubungkan aplikasi dengan database MySQL. Cara kerjanya yaitu aplikasi mengirim perintah/permintaan ke web service kemudian, web service manjalankan query untuk mengambil data film yang ada pada database MySQL. Hasil dari query ini kemudian dikirim kembali ke aplikasi dengan format JSON.
Ada dua file yang terdapat pada web service ini yaitu :
1. koneksi.php
Berfungsi untuk menghubungkan web service ke database MySQL.

define('host','localhost');
define('user','*******');
define('pass','********');
define('db_name','db_cinema1');

$db= new MySQLi(host,user,pass,db_name);
if($db->connect_errno>0){
 die('Koneksi ke database gagal ['. $db->connect_error .']'); 
}

2. data_movie.php
Berfungsi untuk menerima perintah dari aplikasi, dilanjutkan dengan menjalankan query. Hasil query ini dikirim ke aplikasi.

if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');
}


if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
}
header("Content-Type: application/json");
include("inc/koneksi.php");

$action = $_REQUEST['action'];
$page="";
$response=array();
function _convert($text){
 $respon='';
 if(!empty($text)){
  $respon=Str_replace('/','$',$text);
 }
 return $respon;
}

switch($action) {
 case "view_movie_last_update":
  $param="";
  if(isset($_REQUEST['param'])){
   if(!empty($_REQUEST['param'])){
    $param=" WHERE category LIKE'%".$_GET['param']."%'";
   }
  }
  $sql=$db->query("select * from tb_movie $param ORDER BY tgl_upload Desc,id_movie Desc");
  if($sql->num_rows>0){
  while($r=$sql->fetch_object()){
  $response[]=array(
   "id"=>$r->id_movie,
   "album"=>$r->title,
   "artist"=>$r->category,
   "image"=>$r->cover,
   "url_v"=>_convert($r->url)
  );
  }
  
  }
 
 break;

 case "get_movie":
  $sql=$db->query("select url,tempat from tb_movie where id_movie='".$_GET['id']."'");
  if($sql->num_rows>0){
   $r=$sql->fetch_object();
    $response[]=array(
     "url_v"=>_convert($r->url)
    );
  }

 break;
 
}
echo  json_encode($response);

Untuk source code lengkapnya bisa di download dibawah.

Tampilan aplikasi 
1. Beranda
Halaman yang pertama kali ditampilkan saat aplikasi ini dijalankan. Pada gambar dibawah terlihat daftar film yang diurut berdasarkan tanggal terakhir di upload.

Movie Online Streaming Application
Beranda

2. Menu Navigasi
Menu navigasi terletak di sebelah kiri layar. Klik salah satu menu, maka aplikasi akan menampilkan film sesuai kategori yang dipilih.
menu navigasi Movie Online Streaming Application
Menu Navigasi

3. Pencarian
Di atas list film terdapat textbox yang berfungsi untuk mempermudah pengguna dalam pencarian film. Film di cari berdasarkan judul dan kategori film yang paling mirip dengan keyword yang di ketik pada textbox pencarian.
Pencarian Movie Online Streaming Application
Pencarian

4. Player
Gambar dibawah memperlihatkan tampilan film yang sedang diputar. Film ditampilkan menggunakan Video HTML.
streaming video ionic framework

Untuk demo Movie Online Streaming Application dapat download file apk dibawah ini :

Demo :

How to Create a Movie Online Streaming Application Using Ionic Framework

download source code sirikbanget.com





Download source code:
Demikian posting kali ini. Semoga bermanfaat.

Sunday, September 18, 2016

Cara Install Java Development Kit (JDK) pada Windows 10

View Article
Anda pasti pernah mengalami pada saat menginstall suatu aplikasi anda diminta untuk menginstall Java Development Kit (JDK). Kenapa harus install JDK? apa itu Java Development Kit (JDK)?. Pada posting kali ini saya akan membahas tentang Java Develepment Kit (JDK).

Pengertian Java Development Kit (JDK)
Java Development Kit disingkat dengan JDK adalah suatu perangkat lunak yang berfungsi untuk mengkompilasi kode java ke kode byte yang dapat dimengerti dan dijalankan Java Runtime Environment (JRE). Trus apa itu JRE?

Pengertian Java Runtime Environment (JRE)
Java Runtime Environment (JRE) merupakan perangkat lunak untuk menjalankan aplikasi berbasis kode java. Pada JRE terdapat banyak kumpulan class-class dan file pendukung aplikasi berbasis kode java. JRE merupakan bagian dari Java Development Kit (JDK), dapat diunduh secara terpisah. Salah satu bagian penting dari JRE adalah Java Virtual Mechine  disingkat dengan JVM. Apa itu JVM?

Pengertian Java Virtual Mechine (JVM)
Java Virtual Mechine (JVM) adalah suatu perangkat lunak yang dibutuhkan untuk menterjemahkan bahasa pemrograman java ke bahasa mesin.

Tiap apliksi yang dibangun menggunakan bahasa pemrograman java membutuhkan JDK untuk mengkompilasi kode java dan dijalankan menggunakan JRE. Agar kode java dapat dijalankan di perangkat keras atau mesin, JRE membutuhkan JVM untuk menterjemahkan kode java ke bahasa mesin.  Itulah sebabnya kanapa harus install Java Development Kit (JDK).

Cara install Java Development Kit (JDK)
1. Download JDK pada situs resminya. Klik gambar dibawah
Cara install Java Development Kit

2. Setelah masuk kehalaman situs resmi Oracle, kemudian kita pilih JDK sesuai dengan sistem operasi yang anda gunakan.
Cara install Java Development Kit

3. Setelah selesai download, jalankan file yang di download tadi dengan mengklik 2 kali.

4. Setelah itu anda akan melihat tampilan seperti gambar berikut ini.
Cara install Java Development Kit

5. Klik tombol 'Next'
6. Pilih direktori tempat installasi, atau biarkan defaultnya. Kemudian klik tombol 'Next'.
Cara install Java Development Kit

7. Tunggu proses installasi yang sedang berjalan.
Cara install Java Development Kit

8. Setelah proses installasi berhasi, akan tampil seperti gambar dibawah ini.
Cara install Java Development Kit
9. Sekarang dilanjutkan dengan menambahkan direktori java ke 'Environment Variables'.
10. Masuk ke Advanced System Setting Windows
Cara install Java Development Kit

11. Kemudian klik tab 'Advanced', dibawah akan tampil tombol 'Environment Variables', kemudian di klik.
Cara install Java Development Kit

12. Pada kotak 'System Variables' klik 'path', dilanjutkan dengan klik tombol edit.
Cara install Java Development Kit

13.  Setelah itu akan tampil seperti gambar dibawah ini.  Buka lokasi file java di install (defaultnya ada di C:\Program Files\Java\bin). Copy alamat address bar, kemudian Paste pada kolom 'Variable Value'. Pastikan untuk memberi tanda ';' sebelum di tambahkan ke kolom Variable Value.

Cara install Java Development Kit

14. Kemudian klik tombol 'OK'. Selesai


Saturday, September 17, 2016

Tutorial Ionic : Ionic Framework

View Article
Ionic Framework

Pengertian Ionic Framework
Apa itu framework? Framework adalah suatu kerangka kerja berupa kumpulan script-script yang sudah siap digunakan untuk membantu pekerjaan seorang programmer.

Ionic Framework itu sendiri merupakan platform open-source yang digunakan untuk membantu para programmer membangun aplikasi mobile yang bersifat hybrid (sekali buat bisa untuk banyak platform). Ionic Framework dibangun menggunakan bahasa pemrograman berbasis web seperti HTML5, CSS, Javascript. Jika anda sudah terbiasa membuat website maka akan lebih mudah membangun aplikasi mobile menggunakan Ionic Framework.

Ada beberapa hal yang wajib anda pahami sebelum menggunakan Ionic Framework yaitu :
  • HTML5
  • Javascript
  • CSS
  • NodeJS
  • AngularJS
  • PhoneGap
  • Command Line
Software yang diperlukan untuk membangun aplikasi mobile menggunakan Ionic Framework :
  1. Java Development Kit (JDK)
  2. Cordova
  3. NodeJS
  4. Android SDK
  5. Apache ANT
  6. Browser (Google Chrome, Mozilla, Opera)
Jika dibandingkan dengan framework lainnya, Ionic Framework memiliki beberapa kelebihan antara lain :
  • Ionic Framework merupakan software open-source, jadi dapat digunakan untuk membangun aplikasi gratisan ataupun aplikasi yang bersifat komersil.
  • Aplikasi yang dibangun menggunakan Ionic Framework dapat dijalankan di browser, lebih cepat dan ringan ketimbang dijalankan melalui emulator.
Sekian artikel singkat mengenai Ionic Framework. Pada artikel berikutnya saya akan bagikan source code berbasis Ionic Framework database MySQL, Semoga bermanfaat.

Monday, May 23, 2016

Tutorial PHP : Create CCTV Player RTSP (Real Time Streaming Protocol) Using VXG Chrome Media Player Plugin

View Article
Before I used Netdscape Plugin Application Interface (NPAPI) to display the CCTV Real Time Streaming Protocol (RTSP) on website. But in September 2015 google permanently remove Netdscape Plugin Application Interface (NPAPI) support from the Chrome browser.
For the solution I use VXG Chrome Media Player Plugin for CCTV monitoring on the Website.

VXG Chrome Media Player Plugin is based on Google's Native Client (NaCI) and Portable Native Client (PNaCI). Supported stream types: RTSP, RTP, UDP, RTMP, MMS and HLS. Supported video formats: H.264, MPEG-4 and other. You can get Chrome VXG Media Player Plugin along with the tutorial in www.videoexpertsgroup.com.
Or you can follow the tutorial Create CCTV Player RTSP (Real Time Streaming Protocol) Using Chrome VXG Media Player Plugin on this page.

Demo :


Download source code :

Tuesday, February 9, 2016

Tutorial ExtJS : How to Create User Form and User Level Access Using ExtJS + PHP + MySQL Database

View Article
Ext JS

This post will discuss about how to create a user form and  user group access levels for each user. Each group has a different access levels . This application was created using ExtJS Framework , PHP and MySQL Database.

Features in the app :
- Login
- Logout
- Grid
- Search
- Add New User , Edit , Delete
- Add New Group , Edit Delete
- Right Click Menu
- Double Click Event
- Multi User Access Level

For demo please watch this video :


Download Source Code :

Sunday, February 7, 2016

Tutorial ExtJS : How to Create Main Page with Tab Panel and Tree Navigation Menu Using ExtJS Framework + PHP

View Article
Ext JS Framework

In previous posts I've shared How to Create a Login Form Using ExtJS Framework + PHP + MySQL Database. This time I will share How to Create Main Page with Tab Panel and Tree Navigation Menu Using ExtJS Framework + PHP.

The following step-by-step how to create a main page and navigation menu using ExtJS Framework + PHP :

1. Create new folder 'example' in htdocs


2. Copy folder library ExtJS and paste into folder 'example'



3. Create folder 'resources' -> 'images' in directory 'example'. (Resources folder for you to store icons/images).



4. Create folder 'app' in directory 'example'


5. Go to folder 'app' and then create new 2 folder in directory 'app'
- folder controller
- folder view


6. Create 'ItemController.js'. Save as into folder 'controller'


7. Create 'Viewport.js'. Save as into folder 'view'


8. Create folder 'layout' in directory 'view'


9. Create 'Center.js', 'North.js', 'West.js' and then  save as in folder 'view'
Center.js
West.js

North.js

10. Create app.js. Save as into directory 'example'


11. Create index.php in directory 'example'


12. Try to run example -> http://localhost/example

Demo :



Download source code :


Friday, January 29, 2016

Tutorial ExtJS : How to Create Login Form Using ExtJS Framework + PHP + MySQL

View Article
Create login form using extjs framework
In this post we will create a login form using ExtJS Framework + PHP + MySQL database. In general the login form used to restrict user access rights system. So who can access the system only those who have registered on the system. Login form also serves to improve system security.

Video Tutorial How To Create Login Form Using ExtJs, PHP, Database MySql


Here are the steps how to create a login form using the ExtJS Framework, PHP and MySql Database :

The first step : Create Database

1. Run XAMPP (Start Service Apache and MySQL)
create login form using extjs framework

    2. Open Browser -> go to http://localhost/phpmyadmin

    3. Create New Database -> Create tabel and field -> set user_id as Primary Key and Auto_Increment
    Create login form using extjs framework


    4. Insert New Record
    Create login form using extjs framework


    The second step : Create Application

    5. Create new folder in htdocs
    Create login form using extjs framework


    6. Copy folder library ExtJS and paste into folder 'example'
    Create login form using extjs framework


    7. Create new folder 'server' in directory example

    8. Create login.js and save as in folder example
    Ext.onReady(function(){
     Ext.QuickTips.init();
     
     var login = new Ext.FormPanel({
      labelWidth:90,
      url:'server/login/service.php',
      method:'POST',
      width:300,
      autoHeight:true,
      bodyStyle:'padding: 10px 10px 15px 15px',
      defaultType:'textfield',
      monitorValid:true,
      items:[{
       fieldLabel:'Username',
       id:'txtUsername',name:'txtUsername',
       allowBlank:false
      },{
       fieldLabel:'Password',
       id:'txtPassword',name:'txtPassword',
       allowBlank:false,
       inputType:'password' 
      }],
      buttons:[{
       text:'Login',
       type:'submit',
       name:'signin',
       handler:function(btn){
        login.getForm().submit({
         method:'POST',
         waitTitle:'Please wait...',
         waitMsg:'Try to login..,',
         success:function(){
          Ext.Msg.alert('Message', 'Login successfully!', function(btn,text){
           if(btn == 'ok'){
            var redirect = 'index.php';
            window.location = redirect; 
           }
          });
         },
         failure:function(response){
          Ext.Msg.alert('Message', 'Login failed! Please try again...');
          login.getForm().reset();
          var txtUser=Ext.getCmp('txtUsername');
          txtUser.focus('',10); 
         }
        });
       }
      }]
     });
     
     var createwindow = new Ext.Window({
      title:'Example',
      widht:315,
      height:155,
      closable:false,
      items:login.show()
     });
     
     createwindow.show();
     
    });
    
    
    
    9. Create new folder 'inc' in directory server

    Create login form using extjs framework

    10. Create connection.php and save as into folder inc
    Create login form using extjs framework

    
    
    11. Create new folder 'Login' into directory server
    Create login form using extjs framework

    12. Create service.php, save as into folder login

    Create login form using extjs framework


    13. Create index.php, save as into directory example
    Create login form using extjs framework


    14. Try to run example-> http://localhost/example
    Create login form using extjs framework

    User login : demo
    Password : demo

    Download Source Code  :



    Monday, July 20, 2015

    Cara Memperkecil Ukuran Video tanpa Merubah Kualitas Gambar Menggunakan BENCOS

    View Article

    BENCOS adalah aplikasi open source alias gratis, berguna untuk mengubah video menjadi MKV atau MP4 dan memperkecil ukuran video namun kualitas gambar dan suaranya tidak jauh berbeda dengan video aslinya.

    BENCOS is open source application, useful for converting video into MKV or MP4 video and reduce the size but quality of the picture and sound are not much different from the original video.



    Tutorial :

    Tuesday, July 14, 2015

    Tutorial PHP : Sistem Pakar Metode Case Based Reasoning

    View Article
    download sistem pakar metode case base reasoning
    Sistem Pakar adalah sistem berbasis komputer yang menggunakan pengetahuan, fakta, dan teknik penalaran dalam memecahkan masalah yang biasanya hanya dapat diselesaikan oleh seorang pakar dalam bidang tertentu. Sistem Pakar merupakan salah satu cabang dari AI (Artificial Intelligence) yang membuat penggunaan secara luas knowledge yang khusus untuk penyelesaian masalah tingkat manusia yang pakar (ahli).
    Teknologi Sistem Pakar merupakan perangkat lunak tingkat tinggi yang berusaha meniru fungsi dan kerja seorang pakar. Biasanya Sistem Pakar berupa perangkat lunak pengambil keputusan yang mampu mencapai tingkat performa yang sebanding seorang pakar dalam bidang problem yang khusus dan sempit.
    Komponen Sistem Pakar :
    1. User Interface (Antarmuka Pengguna) : adalah bagian penghubung program sistem pakar dengan pengguna. Antarmuka yang efektif dan ramah pengguna (User Friendly) penting sekali terutama bagi pemakai yang ahli dalam bidang yang diterapkan pada sistem pakar.
    2. Knowledge Base (Basis Pengetahuan) : merupakan kumpulan pengetahuan bidang tertentu pada tingkatan pakar dalam format tertentu. Disusun oleh dua komponen dasar, yaitu fact dan rule. Fact merupakan informasi tetang obyek dalam area permasalahan tertentu, sedangkan rule merupakan informasi tetang cara memperoleh fakta baru dari fakta yang telah diketahui.
    3. Inference Engine (Mesin Inferensi) : adalah program komputer yang memberikan metodologi untuk penalaran informasi yang ada dalam knowledge base dan dalam workplace, dan untuk memformulasikan kesimpulan. Inference Engine dapat diartikan juga sebagai otak dari sebuah sistem pakar yang dikenal juga dengan sebutan control structure atau rule interpreter. Komponen ini mengandung mekanisme pola pikir dan penalaran yang digunakan oleh pakar dalam menyelesaikan suatu masalah.
    4. Workplace : merupakan bagian dari sistem pakar yang menyimpan fakta-fakta yang diperoleh saat dilakukan proses konsultasi. Fakta-fakta yang diperoleh saat proses konsultasi.
    5. Knowledge Aqcuisition : Proses pengumpulan, perpindahan dan transformasi kepakaran dalam pemecahan permasalahan yang berasal dari berbagai sumber pengetahuan yang dituangkan ke dalam bentuk yang dimengerti komputer.
    6. Explanatory (Fasilitas Penjelasan) : Suatu fasilitas yang memberikan penjelasan kepada pengguna kenapa komputer meminta suatu informasi tertentu dari pengguna dan dasar apa yang digunaan komputer meminta suatu informasi tertentu dari pengguna sehingga dapat menyimpulkan suatu kondisi.
    Metode Case Based Reasoning adalah salah satu metode penyelesaian masalah berbasis pengetahuan untuk mempelajari dan memcahakan masalah berdasarkan pengalaman masa lalu. Konsep-konsep dalam tahapan proses pada Metode Case Based Reasoning dijelaskan sesuai dengan studi kasusnya, meliputi teknik penyimpanan data kasus, pencarian kemiripan atau kesamaan kasus dan menghasilkan solusi sesuai dengan yang diinginkan dengan pembagian kriteria antara lain High, Medium, Low akan memudahkan dalam memilih kasus yang memiliki kemiripan paling tinggi dengan kasus baru.
    Ketentuan :
    Gejala yang dipilih : keseluruhan gejala x 100
    High = 100 - 80 (Stadium Akhir)
    Medium = 79 - 40 (Stadium Tengah)
    Low = 39 - 0 (Stadium Akhir)
    Perhitungannya Sistem Pakar Metode Case Based Reasoning sebagai berikut :
    (Jumlah gejala yang dipilih / seluruh gejala yang ada) x 100
    Contoh :
    Gejala yang dipilih = 16
    Keseluruhan gejala = 16
    Hasil = (16:16) x 100
    jadi Hasil Diagnosa = 100

    Tampilan Sistem Pakar Metode Case Based Reasoning :
    1. Home
    Sistem Pakar Metode Case Base Reasoning

    2. Jenis Penyakit
    Sistem Pakar Metode Case Base Reasoning

    3. Login
    Sistem Pakar Metode Case Base Reasoning

    4. Register
    Sistem Pakar Metode Case Base Reasoning

    5. Konsultasi
    Sistem Pakar Metode Case Base Reasoning

    6. Hasil
    Sistem Pakar Metode Case Base Reasoning


    Demo :



    Download Source Code :