Arinadi NR Blog

25 Januari 2015

3 Cara Mudah Redirect Halaman dan Auto Refresh dengan HTML, PHP atau Javascript

Sekarang saya akan ngepost sedikit ilmu yang ringan - ringan saja.
Kadang kita butuh membuat suatu halaman web agar auto refresh setiap beberapa menit atau detik. Atau kita kadang butuh suatu halaman web agar redirect ke halaman web lain setelah beberapa detik. Maka script di bawah ini mungkin bisa menjadi solusi.

Script Javascript untuk me-redirect halaman web ke halaman web lain setelah beberapa detik/menit :

<head>
<script>
var time = null
function move() {
//window.location = 'http://localhost/situsdream/laphargaberas.php';
window.location.reload();
//window.refresh();
}
</script>
</head>

<body onload="timer=setTimeout('move()',60000)">

Script HTML untuk merefresh halaman web setiap beberapa detik sekali :

<meta http-equiv="refresh" content="30" />

Script PHP untuk meloncat (redirect) ke halaman lain (standar):

<?php
header("location:tujuan.php");
?>

Script PHP + Javascript untuk memberikan Pesan sebelum redirect ke halaman lain:

<?php
echo "</script>alert('Berhasil');</script>";
echo "</script>document.location='index.php';</script>";
?>

Script PHP + Javascript + HTML untuk memberikan Pesan sebelum merefresh halaman ini:

<?php
echo "</script>alert('Berhasil');</script>";
echo " <meta http-equiv='refresh' content='0' > ";
?>

**Script ini berguna untuk menghapus value POST yang dikirim setelah proses.

Semoga bermanfaat.

12 Oktober 2014

Cara Mudah dan Cepat Membuat Laporan atau Surat PDF dari PHP, MySQL dan MPdf

Asalamualaikum,

Selamat menunaikan ibadah puasa bagi seluruh umat muslim, semuga kita kuat menjalaninya dengan ikhlas dan hanya mengharapkan pahala dari Allah Tuhan Yang Maha Esa..

Sekian kultum dari saya.. Ehhh.. :D

Oke, tutorial pertama saya ini tentang “Mudah dan Cepat Membuat Laporan atau Surat PDF dari PHP, MySQL dan MPdf”..

Langsung saja kita siapan alat dan bahannya..

Laptop atau apalah..
Text editor..
XAMPP atau Virtual Server lain..
MPDF, karena saya saat ini sudah jatuh hati pada kemudahan dan kesederhanaannya setelah berkelana melewati gunung dan lembah dan beberapa cabe-cabean.. Kenapa MPDF? Kita akan bahas setelah tutorial ini. (Sori Tutornya agak @#, Maklum ABG.. hehe)
Browser..
Kemauan.

Untuk MPdf bisa di googling atau download disitus resminya (http://www.mpdf1.com/mpdf/index.php?page=Download) pilih versi FULL jangan yang UPDATE..

Setelah semua Alat dan Bahan sudah terkumpul, hanya perlu waktu 5menit saja untuk membuat “Mudah dan Cepat Membuat Laporan atau Surat PDF dari PHP, MySQL dan MPdf” sekarang kita mulai.

Langkah 1

NIAT..(Penting)

Langkah 2

Nyalakan laptop, buka text editor kesayangan anda..

Buka XAMPP, jalankan Apache dan MySQL.

Seperti Ini..

Langkah 3

Kita Buat databasenya.

Buka PhpMyAdmin, buka tab “SQL”..

Sebagai contoh Paste kan kode SQL ini..

CREATE TABLE IF NOT EXISTS `coba` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` text NOT NULL,
  `pesan` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Dumping data for table `coba`
--

INSERT INTO `coba` (`id`, `nama`, `pesan`) VALUES
(1, 'Arinadi', 'Hy, Selamat Puasa'),
(2, 'Nur', 'Puasa = Jaga Mulut, Mata, Hati, Telinga.'),
(3, 'Rohmad', 'Kapan Buka Nih? haha');

Hasilnya..

Langkah 4

Kita buat folder xampp > htdoc > coba..

Lalu kita extrak MPDF yang tadi..

Langkah 5

Kita Mulai Codeing..

Copy kode ini..

<?php
 // Define relative path from this script to mPDF
 $nama_dokumen='PDF With MPDF'; //Beri nama file PDF hasil.
define('_MPDF_PATH','MPDF57/');
include(_MPDF_PATH . "mpdf.php");
$mpdf=new mPDF('utf-8', 'A4'); // Create new mPDF Document

//Beginning Buffer to save PHP variables and HTML tags
ob_start(); 
?>
<!--sekarang Tinggal Codeing seperti biasanya. HTML, CSS, PHP tidak masalah.-->
<!--CONTOH Code START-->
<?php
 //KONEKSI
$host="localhost"; //isi dengan host anda. contoh "localhost"
$user="root"; //isi dengan username mysql anda. contoh "root"
$password=" "; //isi dengan password mysql anda. jika tidak ada, biarkan kosong.
$database="pdf";//isi nama database dengan tepat.
mysql_connect($host,$user,$password);
mysql_select_db($database);
?>
<table border=1>
<tr>
<td>id</td>
<td>nama</td>
<td>Pesan</td>
</tr>
<?php 
$sql=mysql_query("SELECT * FROM coba");
while($data=mysql_fetch_assoc($sql)){
echo'<tr>
<td>'.$data[id].'</td>
<td>'.$data[nama].'</td>
<td>'.$data[pesan].'</td>
</tr>';
}
?>
</table>
<!--CONTOH Code END-->

<?php
$html = ob_get_contents(); //Proses untuk mengambil hasil dari OB..
ob_end_clean();
//Here convert the encode for UTF-8, if you prefer the ISO-8859-1 just change for $mpdf->WriteHTML($html);
$mpdf->WriteHTML(utf8_encode($html));
$mpdf->Output($nama_dokumen.".pdf" ,'I');
exit;
?>

Jangan lupa, Edit koneksi pada file php di atas

Save as file dengan nama pdf.php di folder coba.

Sperti ini..

Finishing/Langkah Terakhir

Buka Browser, akses kode yang kita buat tadi dengan localhost/coba/pdf.php

Jika berhasil akan seperti ini..

SELESAI..

Sekarang Saya mau bahas kenapa saya pilih MPdf untuk membuat Laporan dan Surat PDF dari Web..

Ada banyak modul sejenis Mpdf seperti yang terkenal FPDF..

Jujur saya pusing, saat melihat dokumentasi dari FPDF yang settinganya Rumit (Buat Saya)..

Saya iseng di Forum “PHP Indonesia” di Facebook, saya tanya “apa modul untuk membuat pdf yang Simple?” yang jawab beragam seperti domPDF, Fpdf dan lain”..

Setelah itu saya coba download semua yang di rekomendasikan karena saya sedang membuat proyek dan harus jadi 3hari.

Hari pertama saya coba FPDF dengan membaca DOC nya, ternyata rumit.

Masih di hari yang sama Saya coba domPdf dari github malah tambah puyeng… masalahnya cara instalnya(emang mungkin saya yang telmi.. hehe)

Merasa Gelisah tak menentu, dihari yang sama pas sore hari saya coba MPDF dengan membaca DOC nya.. saya fikir sama dengan FPDF karena syntax kodenya mirip sekali dengan FPDF,

Satu persatu saya buka dan baca DOC MPDF secara online, nah pada ahkirnya saya ketemu sample code yang sangat mudah dimengerti..

Paginya saya terapkan algoritma saya untuk project tadi, dan hasilnya TRUE.. HOREEEE

Problem selesai dalam 2 hari dan tinggal tunggu transfer ..hehe..

SEKIAN TUTORIAL “Mudah dan Cepat Membuat Laporan atau Surat PDF dari PHP, MySQL dan MPdf”

Semuga Bermanfaat..

WalaikumSalam..

Repost From Jagocoding.com at my ori post

[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3

Assalamualainkum..

Oke, Membuat slide show adalah pekerjaan yang sulit untuk yang baru belajar CSS karena pada dasarnya Slide Show dibuat dengan Javascript.

Untuk saya, Js adalah bahasa pemerograman yang sedikit rumit, jadi untuk membuat aksi seperti slide show pun juga sulit.

Tapi setelah saya belajar bootstrap membuat slide show adalah pekerjaan yang sangat mudah.

Dan sekarang saya akan memberikan Tutorial “[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3” yang menunjukan bagaimana mudahnya membuat slide show dengan Bootstrap 3.

Ya, Kita mulai tutorialnya..

Sekarang kita siapkan Alat Dan Bahanya..

Laptop atau benda sejenisnya.
Text Editor Tercinta.
Browser.
Jquery. Versi 1.7 keatas, bias di download di situs resminya
Bootstrap 3. Kalo baru belajar jangan nanggung di v.2 langsung aja ke v.3 karena lebih mudah dan lengkap tentunya..
3 Gambar atau lebih dengan dimensi sama.

Setelah semua alat dan bahan terkumpul mari kita mulai membuat Slide Show yang Sangat Mudah ini,

Tak udah berlama” perkerjaan ini akan kita selesaikan paling lama 5 menit saja..

OKE….

Langkah 1

Niat.. *Ini Penting..

Langkah 2

Nyalakan Laptop atau benda sejenisnya..

Buka Text editor..

Langkah 3

Buat folder , terserah dimana saja. Misal D: coba..

Lalu buat folder baru di dalamnya untuk wadah file bootstapnya, misal bootstap.

Sekarang kita extrak bootstrap 3 yang sudah ada..

Seperti ini..

Hasil struktur Foldernya jadi seperti ini..

coba
>bootstrap
>>css
>>fonts
>>js

Langkah 4

Sekarang kita letakan jQuery.min.js di coba>bootstrap>js.

Seperti ini..

Lalu kita letakan gambar di paling depan.

Seperti ini..

Saya hanya menggunakan 1 gambar yang akan saya gunakan ber ulang karena saya sedang tidak punya gambar bagus.

Langkah 5

Sekarang kita mulai Coding..

Copy kode ini, penjelasan kode ada di komentar kodenya..

Monggo..

<!DOCTYPE html>

<html lang="id">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Membuat Slide Yang Sangat Mudah</title>

    <!-- CSS Bootstrap -->

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- CSS kamu, Panggil CSS buatan mu sendiri di bawah sini seperti biasa -->

    <!-- JS untuk IE -->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

  <!-- Content START -->

  <div id="slideshow-mudah" class="carousel slide" data-ride="carousel">

  <!-- Indicators, Ini adalah Tombol BULET BULET dibawah. item ini dapat dihapus jika tidak diperlukan -->

  <ol class="carousel-indicators">

    <li data-target="#slideshow-mudah" data-slide-to="0" class="active"></li>

    <li data-target="#slideshow-mudah" data-slide-to="1"></li>

    <li data-target="#slideshow-mudah" data-slide-to="2"></li>

  </ol>

  <!-- Wrapper for slides, Ini adalah Tempat Gambar-->

  <div class="carousel-inner">

    <div class="item active">

      <img src="1.jpg" alt="slideshow-mudah"> <!—Gambar -->

      <div class="carousel-caption"> <!—Penjelasan -->

        <h3>Slide 1 (Judul)</h3>

        <p>Ini adalah Slide 1 (Penjelasan)</p>

      </div>

    </div>

    <div class="item">

      <img class="" src="1.jpg" alt="slideshow-mudah"> <!—Gambar -->

      <div class="carousel-caption">  <!—Penjelasan -->

        <h3>Slide 2 (Judul)</h3>

        <p>Ini adalah Slide 2 (Penjelasan)</p>

      </div>

    </div>

    <div class="item">

      <img src="1.jpg" alt="slideshow-mudah"> <!—Gambar -->

      <div class="carousel-caption"> <!—Penjelasan -->

        <h3>Slide 3 (Judul)</h3>

        <p>Ini adalah Slide 3 (Penjelasan)</p>

      </div>

    </div>

  </div>

  <!-- Controls, Ini adalah Panah Kanan dan Kiri. item ini dapat dihapus jika tidak diperlukan-->

  <a class="left carousel-control" href="#slideshow-mudah" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

  </a>

  <a class="right carousel-control" href="#slideshow-mudah" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right"></span>

  </a>

</div>

  <!-- Content END -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="bootstrap/js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

  </body>

</html>

Lalu Simpan di folder coba, dengan extensi .html dan nama terserah..

Seperti ini..

Langkah 6

Sekarang kita jalankan file html tadi.

Open With browser anda..

Hasilnya seperti ini..

Selesai

Jadi sebenarnya kita hanya akan bermain di . carousel dan untuk menambah jumlah slide kita hanya bermain di .item..

Sesuaikan jumlah li di . carousel-indicators dengan jumlah item yangatau jika tidak diperlukan hapus saja.

Sekian Tutorial “[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3”..

Repost From Jagocoding.com at my ori post

Arinadi NR Blog

Label

25 Januari 2015

3 Cara Mudah Redirect Halaman dan Auto Refresh dengan HTML, PHP atau Javascript

12 Oktober 2014

Cara Mudah dan Cepat Membuat Laporan atau Surat PDF dari PHP, MySQL dan MPdf

[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3

Arsip Blog

Entri Populer