Saturday, October 8, 2016

10 Ebook Gratis Untuk Belajar WEB, PHP, Javascript , HTML5, CSS3, Mobile Web, Wordpress


Cumacoder kali ini akan share ebook gratis. Ebook ini merupakan ebook gratis yang bisa di download di web https://www.sitepoint.com . 10 Ebook gratis ini masing masing bukunya ada yang membahas tentang WEB, PHP, Javascript , HTML5, CSS3, Mobile Web, Wordpress. Oke untuk penjelasan masing masing isi bukunya kami jelaskan dibawah ya. Dan kami tidak lupa untuk menyertakan file downloadnya.

1. Build Mobile Websites and Apps for Smart Devices
Build Mobile Websites and Apps for Smart Devices

Buku ini merupakan panduan praktis bagi anda yang tertarik dalam mengambil bagian dalam salah satu perkembangan yang paling menarik dalam komputasi sejak internet itu sendiri: web mobile. Dengan yang diharapkan penggunaan web mobile untuk menyalip browser desktop di tahun depan, Anda akan sempurna ditempatkan untuk mengambil keuntungan! Membangun Mobile adalah pendekatan yang menyenangkan dan dapat diakses oleh pengembangan mobile - dan intro sempurna untuk pemula.
2. PHP Master: Write Cutting-edge Code
PHP Master: Write Cutting-edge Code

PHP Master: Write Cutting-edge Code dibuat khusus untuk pengembang PHP yang serius tentang memperbaiki aplikasi server-side mereka. Buku ini akan membantu Anda untuk menggunakan pendekatan pemrograman berorientasi objek yang paling efektif, bungkus proyek di lapisan keamanan, dan memastikan kode Anda melakukan tugasnya dengan sempurna.



3. CSS Master
CSS Master

CSS telah berkembang dari bahasa untuk memformat dokumen ke dalam bahasa yang kuat untuk merancang aplikasi web. Kesederhanaan adalah menipu, namun. Ini memungkiri kompleksitas model kotak, konteks susun, spesifisitas, dan cascade. Sangat sulit untuk mengembangkan antarmuka yang bekerja di berbagai ukuran layar dan dengan bermacam-macam mekanisme masukan. CSS penguasaan terletak pada pemahaman konsep-konsep ini dan bagaimana menanggulanginya, serta memahami dan menggunakan alat-alat baru seperti Linter, pengoptimalan, dan preprosesor.



4. The Principles of Beautiful Web Design, 3rd Edition
The Principles of Beautiful Web Design, 3rd Edition

Boros diilustrasikan dengan contoh-contoh rinci, Prinsip-prinsip Desain Web Indah adalah panduan mudah berikut yang akan membawa Anda melalui proses menciptakan desain besar dari awal sampai akhir. Tidak ada sebelum pengalaman desain web diperlukan.
5. Full Stack JavaScript Development with MEAN
Full Stack JavaScript Development with MEAN

Dengan alat-alat modern, adalah mungkin untuk membuat aplikasi produksi kelas hanya menggunakan JavaScript, HTML, dan CSS. Kombinasi MongoDB, Express, AngularJS, dan Node.js, semua teknologi JavaScript, telah menjadi sangat populer sehingga itu sudah dijuluki tumpukan MEAN. Buku ini akan mengeksplorasi tumpukan MEAN secara rinci.



6. The WordPress Anthology
The WordPress Anthology

WordPress Anthology menempatkan Anda di kursi pengemudi ini kuat & fleksibel open source CMS, menawarkan array yang luas dari solusi untuk proyek-proyek Anda. Penuh sesak dengan terbukti tips & teknik untuk pengembang web, Anda akan menemukan cara efektif menggunakan WordPress untuk lebih memenuhi kebutuhan Anda. Singkatnya, itu akan membuat paling serbaguna di dunia kerja CMS untuk Anda!


br />
7. HTML5 & CSS3 for the Real World: 2nd Edition
HTML5 & CSS3 for the Real World: 2nd Edition
HTML5 & CSS3 untuk Real World adalah pengenalan yang sempurna untuk generasi terbaru dari teknologi pengembangan web. panduan-to-follow mudah ini mencakup segala sesuatu yang Anda butuhkan untuk memulai. Anda akan menguasai markup semantik tersedia di HTML5, dan menemukan cara untuk menggunakan CSS3 untuk membuat website yang menakjubkan yang tampak tanpa menggunakan workarounds kompleks.
8. JavaScript: Novice to Ninja
JavaScript: Novice to Ninja
JavaScript telah menjadi keterampilan yang harus dimiliki untuk semua pengembang web. JavaScript: Novice untuk Ninja adalah menyenangkan, praktis, dan panduan komprehensif untuk penggunaan modern bahasa menipu kuat ini.

Dalam pengantar langkah-demi-langkah untuk coding di JavaScript Anda akan belajar bagaimana memecahkan masalah di dunia nyata, event lintasan, desain eye-catching animasi, membangun bentuk cerdas, dan mengembangkan aplikasi yang lebih kaya. Sepanjang jalan, Anda akan belajar untuk mengembangkan sesuai dengan praktik terbaik, termasuk Object Oriented Programming dan Test Driven Development.
9. Jump Start HTML5
Jump Start HTML5

Semua yang anda perlu tahu tentang HTML5 di satu tempat! Jika Anda apapun pengembang web maka Anda perlu tahu HTML. Bahasa ini telah mengalami beberapa perubahan dramatis dalam beberapa tahun terakhir: HTML5 telah datang ke tempat kejadian, menawarkan banyak fitur baru yang menarik, seperti audio asli dan video, grafik vektor, aplikasi offline, dan banyak lagi. Buku ini adalah primer yang sempurna untuk mendapatkan untuk mengatasi dengan HTML5, dan mulai untuk mengambil keuntungan dari daya dalam proyek Anda.



10. Outsourcing Web Projects
Outsourcing Web Projects

Apakah Anda berharap bahwa Anda bisa mengambil lebih besar, pekerjaan yang lebih menguntungkan, tetapi tidak merasa bahwa Anda memiliki waktu, sumber daya, atau kemampuan teknis untuk melakukannya? Buku ini akan memberikan Anda dengan mencoba dan menguji teknik yang akan memastikan bahwa Anda dapat memberikan kompleks, proyek-proyek web berkualitas tinggi dengan menggunakan sumber daya pembangunan outsourcing, baik di waktu dan anggaran! Dalam buku ini, Dave Hecker, seorang spesialis Outsourcing yang berkonsultasi ke Fortune 50 perusahaan, mengungkapkan rahasia di balik mencapai proyek pengembangan web outsourcing sukses. Dave membawa Anda melalui proses menulis spesifikasi proyek besar untuk mengiklankan pekerjaan Anda secara efektif, memilih mitra outsourcing terbaik, dan mengelola proyek sampai selesai sukses. Sepanjang jalan, Anda akan mengambil banyak berguna petunjuk-seperti metode sederhana untuk menentukan yang melakukan outsourcing mitra yang tepat bagi Anda dan tips manajemen proyek sederhana yang akan membantu menjaga proyek Anda di jalur.


Monday, September 26, 2016

Tutorial Membuat Autocomplete Dari Database Dengan PHP dan jQuery + Source Code





Tutorial Membuat Autocomplete Dari Database Dengan PHP dan jQuery
Autocomplete

Cuma Coder kali ini akan membagikan tutorial membuat autocomplete field yang datanya berasal dari database, dan akan diambil dengan bantuan jQuery. Autocomplete merupakan fitur yang berfungsi untuk memberikan sugesti prediksi data yang akan di inputkan oleh pengguna sehingga mempercepat proses input data. Konsepnya adalah dengan mencocokan beberapa karakter yang sudah dimasukan pengguna dengan data yang telah disimpan dalam database. 

jQuery
Untuk membuat autocomplete dari database menggunakan jQuery. Silahkan download jQuery UI nya pada link berikut. Download jQuery UI . kemudian ekstrak kedalam folder js.

Database
Untuk contoh databasenya silahkan buat database dengan nama db_siswa dan sebuah tabel dengan nama tb_siswa dengan struktur seperti berikut. : 
Name Type Size Extra Primary
id INT 9 auto_increement yes
nama var_char 50

PHP
Buat file dengan nama data.php dengan source code seperti berikut :

<?php
//connect ke database
  mysql_connect("localhost","root","");
  mysql_select_db("db_siswa");
//harus selalu gunakan variabel term saat memakai autocomplete,
//jika variable term tidak bisa, gunakan variabel q
$term = trim(strip_tags($_GET['term']));
  
$qstring = "SELECT * FROM tb_siswa WHERE nama LIKE '".$term."%'";
//query database untuk mengecek tabel anime
$result = mysql_query($qstring);
  
while ($row = mysql_fetch_array($result))
{
    $row['value']=htmlentities(stripslashes($row['nama']));
    $row['id']=(int)$row['id'];
//buat array yang nantinya akan di konversi ke json
    $row_set[] = $row;
}
//data hasil query yang dikirim kembali dalam format json
echo json_encode($row_set);
?>

File ini berfungsi untuk koneksi database,  kemudian file akan melakukan pencarian data dalam tabel dari inputan yang dimasukan oleh pengguna kemudian dicocokan dengan field nama yang ada di database, jika bertemu yang cocok kemudian data di kembalikan dalam format json untuk di tampilkan sebagai sugesti autocomplete.


Selanjutnya buatlah file dengan nama index.php dengan source code seperti berikut :

<!doctype html>
   
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Autocomplete dari database dengan jQuery dan PHP | Cuma Coder</title>
 <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet"
    href="js/jquery-ui.css" />
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/jquery-ui.js"></script>
  
    <script>
/*autocomplete muncul setelah user mengetikan minimal2 karakter */
    $(function() { 
        $( "#siswa" ).autocomplete({
         source: "data.php", 
           minLength:1,
        });
    });
    </script>
</head>
<body>
<div class="wrap">
 <h1>Data Siswa Sekolah Cuma Coder</h1>
    <h1>Autocomplete dari database dengan jQuery dan PHP</h1>
 <div class="ui-widget">
  <label for="siswa">Nama Siswa : </label>
  <input id="siswa"  />
 </div>
 <p class='copy'>Copyright &copy <a href="http://www.cumacoder.blogspot.com">Cuma Coder</a> 2016</p>
</div>
</body>
</html>


Autocomplete Dari Database Dengan jQuery dan PHP sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan Internet Explorer.


*Notes Jika sugesti tidak muncul
- Perhatikan baik - baik nama dari file JS nya di index.php pastikan file jQuery dan jQuery UI terload.
- Perhatikan baik - baik nama field dan tabel anda yang ada di databse sudah sama dengan yang di data.php .



Untuk source code yang telah jadi silahkan klik tombol download dibawah ini.
>

Monday, September 19, 2016

Tutorial CodeIgniter 3 : Mengganti Tampilan Halaman Error 404 Page Not Found Di CodeIgniter

Error 404 Di CodeIgniter

Pada tutorial kali ini, Cuma coder akan membahas bagaimana cara mengganti tampilan halaman error 404 Page Not Found di codeigniter. defaultnya tampilan halaman error 404 di codeigniter bisa kita lihat seperti gambar dibawah ini. 

404pagenotefound


Ya tampilan defaultnya agak kurang menarik. Nah untuk mengganti tampilannya agar lebih menarik. Kita hanya membuat sebuah controller yang mengarahkannya ke file view yang akan menjadi tampilan halaman error 404. untuk lebih jelasnya silahkan ikuti tutorial dibawah ini.
  1. Lahkah pertama adalah membuat file notfound.php pada folder controllers (nama file bisa disesuaikan keinginan anda).  
    Tutorial CodeIgniter 3 : Mengganti Tampilan Halaman Error 404 Page Not Found Di CodeIgniter
  2. Kemudian buat file notfoundview.php pada folder views (File ini akan menjadi tampilan untuk halaman error 404) . 
    Tutorial CodeIgniter 3 : Mengganti Tampilan Halaman Error 404 Page Not Found Di CodeIgniter
  3. Buka File notfound.php dan tulis source code dibawah ini. 
    Tutorial CodeIgniter 3 : Mengganti Tampilan Halaman Error 404 Page Not Found Di CodeIgniter
  4. Buka juga file notfoundview.php dan tulis source code sesuai tampilan yang di inginkan.
  5. Sekarang buka file routes.php yang berada pada folder config. 
    Tutorial CodeIgniter 3 : Mengganti Tampilan Halaman Error 404 Page Not Found Di CodeIgniter
  6. Cari $route['404_override'] = ''; ubah menjadi $route['404_override'] = 'notfound'; . Untuk lebih jelas perhatikan gambar dibawah ini. 
    Tutorial CodeIgniter 3 : Mengganti Tampilan Halaman Error 404 Page Not Found Di CodeIgniter
  7. Langkah terakhir silahkan di test dengan memasukan url yang menampilkan halaman eror 404. 
Sekian tutorial singkat dari cuma coder. Silahkan baca tutorial lainnya tentang Tutorial CodeIgniter 3 dari cuma coder. 

Thursday, June 23, 2016

Tutorial Install Gammu Terlengkap



Apa itu Gammu ? Gammu adalah sebuah project , program atau aplikasi yang memuat script dan driver yang dapat mengatur beberapa fungsi telepon seluler atau sejenisnya. Gammu juga bekerja di dalam command line atau sebagai daemon tools. Oleh karena itu gammu harus di install terlebih dahulu. Berikut Tutorial Install Gammu . 


Download Gammu

Untuk mendapatkan file atau master instalasi kita bisa mendapatkan gammu secara gratis di web resminya . Silahkan download file master installasi gammu yang dipakai pada tutorial ini. Install Gammu .



Yang Harus Disiapkan Untuk Install Gammu
1. Modem yang support gammu. Daftar modem yang support gammu bisa dilihat di http://wammu.eu/phones.
2. XAMPP ( atau sejenisnya)
3. Gammu yang sudah didownload di atas.
4. Text Editor

Tutorial Install Gammu
1. Install driver modem terlebih dahulu .
2. Install XAMPP dan install text editor (Notepad ++  atau Sublime )
3. Ekstak file gammu yang sudah didownload . Copy ke drive c:\
4. Rename folder gammu yang sudah dicopy menjadi c:\gammu
5. Langkah berikutnya yaitu melakukan konfigurasi file gammurc dan smsdrc. Masuk ke direktori C:\gammu\share\doc\gammu\examples\config . Copy kedua file tersebut ke C:\gammu\bin .
6. Pertama kita konfigurasi gammurc-nya. Untuk membuka file ini gunakan aplikasi text editor (notepad++ atau Sublime). Untuk gammurc kita hanya mengubah konfigurasi pada bagian device dan connection. 
Konfigurasi Devie Gammu - Install Gammu
device kita sesuaikan dengan port modem pada komputer. Untuk melihat port modem, masuk ke Device Manager
Device Modem - Install Gammu
Untuk connection silahkan sesuaikan dengan modemnya masing masing . Bisa dilihat di http://wammu.eu/phones .
7. Langkah berikutnya kita melakukan pengecekan apakah konfigurasi modem sudah sesuai. Jalankan Command Prompt (Run As Administrator), kemudian ketikkan perintah berikut untuk masuk ke direktori C:\gammu\bin

cd c:\gammu\bin
Selanjutnya
gammu --identify

Jika Konfigurasinya berhasil akan menampilkan hasil seperti ini .
Idintify Device Modem - Install Gammu
8. Setelah modem sudah terkoneksi, maka selanjutnya tahap menyambungkan dengan database.

Buat database baru di localhost/phpmyadmin, Untuk contoh kali ini buat database dengan nama “gammu” .
Kemudian import database mysql.sql dari folder C:\gammu\share\doc\gammu\examples\sql
Dabatabase - Install Gammu
9. Selanjutnya kita lakukan konfigurasi pada file smsdrc. Jangan lupa hilangkan tanda # pada bagian yang dikofigurasi . Berikut konvigurasi device dan connection pada smsdrc gammu .
Konfigurasti smsdrc - Install gammu

Konfigurasi database di smsdrc gammu

Konfigurasi Database smsdrc - Install Gammu

10. Setelah konfigurasi smsdrc, selanjutnya install service gammu, bukan Command Promt lalu ketik: 

gammu-smsd –i –c smsdrc –n gammuSMSD

jika berhasil maka akan tampil pesan seperti berikut
Install Service - Install Gammu

Kemudian jalankan service gammu dengan perintah

gammu-smsd –s –c smsdrc –n gammuSMSD


jika berhasil maka akan tampil pesan seperti berikut

Start Service - Install Gammu

11. Setelah semuanya dilakukan, cobalah mengirim SMS ke nomor yang ada pada modem. Jika konfigurasi benar maka pesan atau SMS akan masuk ke database dan berada di tabel inbox.

Sekian tutorial Install Gammu. Semoga bisa diterapkan dan bisa bermanfaat. Terima kasih . 

Monday, June 6, 2016

Tutorial Membuat Login Facebook Dengan PHP



Login facebook dengan PHP , kita dapat menggunakan facebook login pada website kita dengan menggunakan akun facebook pengguna untuk login ke website kita. Jadi kita kita tidak haru memmbutuhkan form resgistrasi dan manajemen pengguna pada web kita. Cukup kita memanfaatkan facebook login yang bisa di pantau pada halaman aplikasi facebook.

Pada tutorial kali ini cumacoder.com akan membahas bagaimana mengintegrasikan facebook login ke website kita dengan menggunakan Facebook PHP SDK , tutorial ini dilengkapi full source code yang bisa didownload pada akhir tutorial ini.

Membuat Facebook APP ID dan APP Secret.
Langkah Ke - 1 » Kunjungi https://developers.facebook.com/apps/ dan klik Tambahkan Sebuah Aplikasi Baru 
» Pilih Website
» Isi Nama Aplikasi Yang Akan Dibuat dan klik Create New Facebook App ID 
» Pilih kategori aplikasi dan klik Buat ID Aplikasi
» Dan Klik Skip Quick Start

Tutorial Membuat Login Facebook Dengan PHP


Tutorial Membuat Login Facebook Dengan PHP


Tutorial Membuat Login Facebook Dengan PHP

Langkah Ke - 2 » Pada menu Pengaturan, Kita isi form Domain Aplikasi ( Ex:www.cumacoder.com )  dan Email Kontak Selanjutnya klik Tambah Platform .
Tutorial Membuat Login Facebook Dengan PHP

Untuk Url Situs Silahkan Di isi Atau Boleh Dikosongkan
Tutorial Membuat Login Facebook Dengan PHP

Step 3 » Untuk Mengaktifkan Aplikasi silahkan klik Tinjauan Aplikasi, Dan klik tombol untuk mengaktifkan aplikasi .

Source Code File fbconfig.php

Step 4 » Silahkan download source code disini, Facebook Login PHP .


Step 5 » Silahkan buka file fbconfig.php dan masukan APP ID , Secret ID dan ubah nama domain. Seperti dibawah ini.


// init app with app id and secret
FacebookSession::setDefaultApplication( 'Your APP ID','Your APP Secret' );
// login helper with redirect_uri
    $helper = new FacebookRedirectLoginHelper('http://www.cumacoder.com/fbconfig.php' );

Your APP ID & Your Secret APP Secret : Ganti sesuai dengan aplikasi yang sudah kita buat di facebook .
Step 6 » Full Source Code File fbconfig.php. Silahkan baca baris komentar untuk info lebih detail.
<?php
session_start();
// added in v4.0.0
require_once 'autoload.php';
use Facebook\FacebookSession;
use Facebook\FacebookRedirectLoginHelper;
use Facebook\FacebookRequest;
use Facebook\FacebookResponse;
use Facebook\FacebookSDKException;
use Facebook\FacebookRequestException;
use Facebook\FacebookAuthorizationException;
use Facebook\GraphObject;
use Facebook\Entities\AccessToken;
use Facebook\HttpClients\FacebookCurlHttpClient;
use Facebook\HttpClients\FacebookHttpable;
// init app with app id and secret
FacebookSession::setDefaultApplication( 'Your APP ID','Your APP Secret' );
// login helper with redirect_uri
    $helper = new FacebookRedirectLoginHelper('http://www.cumacoder.com/fbconfig.php' );
try {
  $session = $helper->getSessionFromRedirect();
} catch( FacebookRequestException $ex ) {
  // When Facebook returns an error
} catch( Exception $ex ) {
  // When validation fails or other local issues
}
// see if we have a session
if ( isset( $session ) ) {
  // graph api request for user data
  $request = new FacebookRequest( $session, 'GET', '/me' );
  $response = $request->execute();
  // get response
  $graphObject = $response->getGraphObject();
      $fbid = $graphObject->getProperty('id');              // To Get Facebook ID
      $fbfullname = $graphObject->getProperty('name'); // To Get Facebook full name
     $femail = $graphObject->getProperty('email');    // To Get Facebook email ID
 /* ---- Session Variables -----*/
     $_SESSION['FBID'] = $fbid;           
        $_SESSION['FULLNAME'] = $fbfullname;
     $_SESSION['EMAIL'] =  $femail;
    /* ---- header location after session ----*/
  header("Location: index.php");
} else {
  $loginUrl = $helper->getLoginUrl();
 header("Location: ".$loginUrl);
}
?>
Source Code File logout.php
file Logout.php digunakan untuk mengahpus sesi login Facebook dan meneruskannya ke halaman utama website kita


Step 7 » Silahkan input halaman utama setelah 
<?php 
session_start();
session_unset();
    $_SESSION['FBID'] = NULL;
    $_SESSION['FULLNAME'] = NULL;
    $_SESSION['EMAIL'] =  NULL;
header("Location: index.php");        // you can enter home page here ( Eg : header("Location: " ."http://www.cumacoder.com"); 
?>

Source Code File index.php

Step 8 » Pada halaman index ini kita bisa mengatur apa yang akan tampil setelah login dengan facebook dan sebelum login dengan facebook .
Full Source Code index.php .
<?php
session_start(); 
?>
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <title>Login with Facebook</title>
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
 </head>
  <body>
  <?php if ($_SESSION['FBID']): ?>      <!--  After user login  -->
<div class="container">
<div class="hero-unit">
  <h1>Hello <?php echo $_SESSION['USERNAME']; ?></h1>
  <p>Welcome to "facebook login" tutorial</p>
  </div>
<div class="span4">
 <ul class="nav nav-list">
<li class="nav-header">Image</li>
 <li><img src="https://graph.facebook.com/<?php echo $_SESSION['FBID']; ?>/picture"></li>
<li class="nav-header">Facebook ID</li>
<li><?php echo  $_SESSION['FBID']; ?></li>
<li class="nav-header">Facebook fullname</li>
<li><?php echo $_SESSION['FULLNAME']; ?></li>
<li class="nav-header">Facebook Email</li>
<li><?php echo $_SESSION['EMAIL']; ?></li>
<div><a href="logout.php">Logout</a></div>
</ul></div></div>
    <?php else: ?>     <!-- Before login --> 
<div class="container">
<h1>Login with Facebook</h1>
           Not Connected
<div>
      <a href="fbconfig.php">Login with Facebook</a></div>
      </div>
    <?php endif ?>
  </body>
</html>

Menyimpan Data User
» Kita Bisa menyimpan data user ke dalam database. Untuk itu silahkan buat struktur tabel seperti berikut: .
CREATE TABLE IF NOT EXISTS `Users` (
  `UID` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `Fuid` varchar(100) NOT NULL,
  `Ffname` varchar(60) NOT NULL,
  `Femail` varchar(60) DEFAULT NULL,
  PRIMARY KEY (`UID`)
);

» Buka dbconfig.php dan sesuaikan dengan settingan database kita.
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');    // DB username
define('DB_PASSWORD', '');    // DB password
define('DB_DATABASE', 'fblogin');      // DB name
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die( "Unable to connect");
$database = mysql_select_db(DB_DATABASE) or die( "Unable to select database");
?>

» File functions.php merupakan fungsi yang bertugas untuk menyimpan data user ke database.
<?php
require 'dbconfig.php';
function checkuser($fuid,$ffname,$femail){
     $check = mysql_query("select * from Users where Fuid='$fuid'");
 $check = mysql_num_rows($check);
 if (empty($check)) { // if new user . Insert a new record  
 $query = "INSERT INTO Users (Fuid,Ffname,Femail) VALUES ('$fuid','$ffname','$femail')";
 mysql_query($query); 
 } else {   // If Returned user . update the user record  
 $query = "UPDATE Users SET Ffname='$ffname', Femail='$femail' where Fuid='$fuid'";
 mysql_query($query);
 }
}?>

Untuk Source Code Dan Database, Silahkan Download dibawah ini . Semoga Tutorial Ini bisa bermanfaat .

Friday, June 3, 2016

Tutorial CodeIgniter 3 : Membuat Tampilan Codeigniter Dengan Bootstrap

Tutorial CodeIgniter 3 : Membuat Tampilan Codeigniter Dengan Bootstrap


Kali ini Cuma Coder akan membahasa tutorial Membuat Tampilan Codeigniter Dengan Bootstrap . Untuk yang belum tahu apa itu Bootstap, Bootstrap adalah front-end framework yang  bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Dengan bootstap kita dapan membangun web dengan tampilan responsif. Sehingga web yang kita buat dengan bootstap bisa menyesuaikan secara otomatis dengan layar gadget. Untuk membuat tampilan codeigniter dengan bootstap sangatlah mudah. Yang kita butuhkan hanyalah CSS dan Jquery Bootstap yang dapat didownload langsung di web resminya Bootstrap .


Dalam tutorial ini kita sebaiknya mengatur url codeigniter seperti yang ada di artikel cuma coder yang berjudul Tutorial CodeIgniter 3 : Menghilangkan Index.php Pada URL (Mempercantik URL Pada CodeIgniter 3) . 

Untuk membuat tampilan codeigniter dengan bootstap kita hanya meload css beserta javascript bootstrap yang telah kita download. Untuk peletakan file css dan javascript bootstrap bisa kita buat didalam folder assets pada folder project codeigniter kita. contohnya seperti skema dibawah ini.

ci_bootstrap/
|-- application/ 
|-- assets/ 
|---- css/ 
|------ bootstrap.min.css 
|------ style.css 
|---- js/ 
|------ bootstrap.min.js 
|------ jquery.min.js 
|---- fonts/ 
|------ glyphicons-halflings-regular.eot 
|------ glyphicons-halflings-regular.svg 
|------ glyphicons-halflings-regular.ttf 
|------ glyphicons-halflings-regular.woff
|------ glyphicons-halflings-regular.woff2 
|-- system/ 
|-- index.php 
|-- .htaccess


Untuk template bisa kita gunakan contoh yang ada di http://getbootstrap.com/getting-started/#examples . Untuk tampilan bootstrap kita akan membuat tiga buah file view yaitu 
1. home.php ( Tampilan untuk isi konten )
2. header.php ( Tampilan untuk header dan juga untuk meload css beserta javascript bootstrap)
3. footer.php ( Tampilan footer)

Silahkan buat juga controller home dengan source code seperti dibawah ini :


<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Home extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
    }
 
 
    /**
     * Cotoh penggunaan bootstrap pada codeigniter::index()
     */
    public function index()
    {
        $this->load->view('home');
    }
}
 
# nama file home.php
# folder apllication/controller/

Source code home.php :


<? $this->load->view('header');?>
 
    <div class="container">
 
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Membuat Tampilan CodeIgniter Dengan Bootstrap</h1>
        <p></p>
        <p></p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>
 
    </div> <!-- /container -->
<? $this->load->view('footer');?>

Source code header.php :


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="FaberNainggolan">
    <title>CodeIgniter dengan Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">
  </head>
 
  <body>
    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Cuma Coder</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
            <li><a href="#about"><i class="glyphicon glyphicon-info-sign"></i> About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Source code footer.php :

    <!-- Bootstrap core and JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<?=base_url()?>assets/js/jquery.min.js"></script>
    <script src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
  </body>
</html>

Jadi kesimpulannya kita hanya meload css dan javascript bootstrap untuk membuat tampilan codeigniter dengan bootstrap. Semoga tutorial ini bermanfaat.

Saturday, May 28, 2016

Tutorial Membuat Statistik Pengunjung (Visitor Counter) Dengan PHP dan MySQLi

Tutorial Membuat Statistik Pengunjung (Visitor Counter) Dengan PHP dan MySQLi

Salam hangat untuk pembaca blog Cuma Coder. Kali ini saya akan membagikan Tutorial Membuat Statistik Pengunjung dengan PHP. Statistik pengunjung sangatlah berguna bagi blog atau website. Fungsinya sangat jelas, dengan statistik pengunjung kita dapat mengetahui jumlah pengunjung ke website kita dan juga berasal dari mana pengunjung website atau blog kita. Bahkan dengan statistik pengunjung kita bisa melihat konten apa saja yang disukai pengunjung. 

Statistik pengunjung sudah saya terapkan sendiri pada Aplikasi Penerimaan Siswa Baru ( PSB) Online yang pernah saya buat. Dalam tutorial ini kita akan membuat halaman counter sistem menggunakan PHP dan MySQLi . Untuk membuat counter sistem kita akan membuat sebuah file PHP untuk tampilan halaman Counter sistem dan tampilan halaman Total tampilan/pageview.

Membuat Database Statistik Pengunjung
Untuk menyimpan statistik pengunjung dengan PHP kita akan menyimpannya dalam sebuah database. Dalam hal ini kita akan membuat database statistik pengunjung dengan dengan 2 tabel yaitu tabel pageview dan totalview.

1. Membuat Tabel pageview
Tabel pageview ini kita akan menyimpan data berupa ip pengunjung dan halaman apa yang dikunjunginya. untuk membuat tabel pageview silahkan jalankan code ini di comand console :

CREATE TABLE `pageview` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `page` text NOT NULL,
 `userip` text NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1

2. Membuat Tabel totalview
Tabel totalview ini merupakan tabel yang akan menyimpan total keseluruhan jumlah pengunjung per halaman yang dikunjunginya. Silahkan buat tabel totalview dengan code dibawah ini :

CREATE TABLE `totalview` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `page` text NOT NULL,
 `totalvisit` text NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1

Membuat Tampilan pageview.php Untuk Statistik Pengunjung
Dengan pageview.php kita akan menggunakan ip address pengunjung sebagai nilai untuk statistik pengunjung web kita. Jadi dengan menggunakan ip address pengunjung, kita akan mengecek ke database web kita. Apakah pengunjung dengan ip address tersebut sudah mengunjungi halaman web kita atau belum. Jika belum , maka kita akan dilakukan penjumlahan ke dalam database. Untuk source code pageview.php yang digunakan sebagai statistik pengunjung silahkan contoh source code dibawah ini :
 


<?php
$mysqli = new mysqli("localhost", "root", "", "db_statistik");
 
  /* check connection */
if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
}
 
  // ambul ip address user
  $user_ip=$_SERVER['REMOTE_ADDR'];
 
 //cek apakah sudah dikunjungi oleh ip address diatas
  $check_ip = $mysqli->query("select userip from pageview where page='yourpage' and userip='$user_ip'");
  if($check_ip->num_rows>=1)
  { 
  }
  else
  {
    //jika belum dikunjungi oleh ip address user diatas akan melakukan perhitungan
    $mysqli->query("insert into pageview values('','yourpage','$user_ip')");
   $mysqli->query("update totalview set totalvisit = totalvisit+1 where page='yourpage' ");
  }
?>
 
<html>
<head>
</head>
 
<body>
  <?php
    //menampilkan statistik pengunjung
    $stmt = $mysqli->query("select totalvisit from totalview where page='yourpage' ");
  ?>
 
    <p>Ip Address Anda <?php echo $user_ip=$_SERVER['REMOTE_ADDR'];;?></p>

  <p>Halaman ini telah dikunjungi sebangak <?php echo $stmt->num_rows;?> kali.</p>
 
</body>
</html>
Hasil tampilan statistik pengunjung dengan sourcecode pageview.php diatas seperti dibawah berikut ini. Untuk source code dan database statistik pengunjung dengan PHP dan MySQLi bisa di download di akhir tutorial ini. Jika ada pertanyaan, kritik dan saran mengenai tutorial membuat statistik pengunjung dengan PHP bisa anda tuliskan dikolom komentar dibawah. Terima kasih telah membaca tutorial ini, semoga bermanfaat .

Tutorial Membuat Statistik Pengunjung (Visitor Counter) Dengan PHP dan MySQLi