Cara menempatkan Form pada slider carousel bootstrap

4 April 2017 Leave a comment

Banyak dari kita yang memakai template bootstrap dapat di download di tautan berikut (http://getbootstrap.com/) karena kemudahan dan kelengkapannya. Selain alasan tersebut, banyak pengguna yang memilih bootstrap karena free dan pengembangannya yang selalu dilakukan oleh tim developer menyesuaikan dengan teknologi terbaru.

Pada kesempatan kali ini saya akan membagikan bagaimana cara menempatkan sebuah Form pada slider carousel bootstrap.

Berikut potongan kodenya :

<header class="main-header"><br><br>
 <div class="slide-wrapper">
 <div id="homepage-feature" class="carousel slide">
 <ol class="carousel-indicators">
 <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
 <li data-target="#homepage-feature" data-slide-to="1"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active" style="background-image:url(<?php echo base_url();?>assets/images/bg1.png)"></div>
 <div class="item" style="background-image:url(<?php echo base_url();?>assets/images/bg2.jpg)">
 <div class="carousel-caption">
 <h1 class="putih">Percentage-based sizing</h1>
 <p>With "mobile-first" there is now only one percentage-based grid.</p>
 <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#homepage-feature" data-slide="prev">
 <span class="fa fa-angle-left"></span>
 </a>
 <a class="right carousel-control" href="#homepage-feature" data-slide="next">
 <span class="fa fa-angle-right"></span>
 </a>
 </div>
 <div class="red">
 <div id="putih">
 <div class="search-home">
 <div id="exTab1" class="container"> 
 <ul class="nav nav-pills">
 <li class="active"><a href="#mobil" data-toggle="tab">Sewa Mobil</a></li>
 <li><a href="#motor" data-toggle="tab">Sewa Motor</a></li>
 </ul>
 <div class="tab-content clearfix">
 <div class="tab-pane active" id="mobil">
 {mobil}
 </div>
 <!-- motor --> 
 <div class="tab-pane" id="motor">
 {motor}
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </header></pre>
<pre>

Dan berikut adalah potongan kode CSS nya :

#putih .search-home {
 max-width: 500px;
 -webkit-border-radius: 10px 10px 10px 10px !important;
 -moz-border-radius: 10px 10px 10px 10px !important;
 -ms-border-radius: 10px 10px 10px 10px !important;
 -o-border-radius: 10px 10px 10px 10px !important;
 border-radius: 10px 10px 10px 10px !important;
 background-color: #ffffff;
}

#exTab1 .tab-content {
 max-width: 450px;
 color : white;
 background-color: #ffffff;
 padding : 5px 15px;

}

#exTab2 h3 {
 color : white;
 background-color: #ffffff;
 padding : 5px 15px;
}

/* remove border radius for the tab */

#exTab1 .nav-pills > li > a {
 border-radius: 0;
}

#exTab1 .nav-pills > li.active > a {
 background-color: #0398D6;
 border-radius: 0;
}

/* change border radius for the tab , apply corners on top*/

#exTab3 .nav-pills > li > a {
 border-radius: 4px 4px 0 0 ;
}

#exTab3 .tab-content {
 color : #000000;
 background-color: #ffffff;
 padding : 5px 15px;
}

#footer {
 background-color: #383838;
 border-top: 5px solid #DAA945;
 bottom: 0;
 color: #ffffff;
 padding: 5px;
 position: fixed;
 top: auto;
 z-index: 101;
 text-align:center;
}

.ticker {
 color: #ffffff;
 padding-left: 5px;
 text-align: left;
}

/* 
 Style untuk halaman home
 - slider
 - form
*/ 

.slide-wrapper {
 position: relative
}

.red {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
 float: left;
}
.red-content {
 width: 100%;
 height: 300px;
 background: red;
 color: #fff;
}
@media (min-width: 768px) { 
 .carousel-caption {
 text-align: right;
 padding-left: 0px;
 }
 .red {
 width: 750px;
 position: absolute;
 left: 50%;
 top: 0;
 bottom: 0;
 padding: 50px 0;
 margin-left: -375px;
 }
 .red-content {
 width: 300px;
 float: left;
 height: 100%;
 background: red;
 color: #fff;
 margin-right:15px; /* width of .container gutter */
 }
}
@media (min-width: 992px) { 
 .red {
 width: 970px;
 margin-left: -485px;
 }
}
@media (min-width: 1200px) { 
 .red {
 width: 1170px;
 margin-left: -585px;
 }
}

/* MISC */
#homepage-feature .item {
 overflow: hidden;
 height: 490px;
 background-color: transparent;
 background-size: cover;
}
#homepage-feature > .carousel-control {
 width: 30px;
 font-size: 40px;
 color: #fff;
 text-shadow: none;
 filter: none;
 opacity: 1;
}
#homepage-feature > .carousel-control span {
 position: absolute;
 top: 50%;
 margin-top: -30px;
 width: 100%;
 text-align: center;
 display: block;
}</pre>
<pre>

Semoga bermanfaat

keep coding ^_^

Categories: Pemrograman, Tips & Trik

Sistem Informasi Klinik dengan codeigniter 3.xx

8 February 2017 Leave a comment

Selamat siang,
Kembali lagi bersama saya, setelah hampir satu taun tidak ngepos apapun.

Sistem Informasi Klinik ini  dibangun dengan menggunakan bahasa pemrograman PHP (framework CI versi 3.xx)dan database MySql, berbasis web sehingga memungkinkan untuk di upload ke hosting anda dan diakses secara online.

Fitur

Sistem ini terdiri dari beberapa modul, antara lain :

  1. Modul Pendaftaran Pasien
  2. Modul Rawat Jalan
  3. Modul Rawat Inap
  4. Modul Jadwal Poli
  5. Modul Obat
  6. Modul Laporan

Screenshot

Berikut saya sertakan beberapa screenshot tampilannya :

klinik-login

klinik-dashboard

klinik-poli

klinik-rawatjalan

 

download

 

Categories: Aplikasi

Memanggil store procedure dengan PHP

19 November 2016 Leave a comment

Dua tahun gak upadate blog, “DUA TAHUN”!!!!!!

Baiklah, maaf saya sudah mengabaikan dirimu hahaha

Kesempatan kali ini, saya akan membuat catatan untuk saya sendiri dan semoga bisa bermanfaat bagi temen-temen lain yang sedang membutuhkan.

Saya mempunyai sebuah database SQLServer, dan membuat sebuah store procedure, store procedure tersebut akan saya panggil melalui PHP

// INI UNTUK KONEKSI PHP dengan SQL SERVER
$serverName = "namaserver"; //serverName\instanceName
$connectionInfo = array("Database"=>"nama_database", "UID"=>"username", "PWD"=>"password");
$conn = sqlsrv_connect($serverName, $connectionInfo);

$tsql_callSP = "{call SP_UNIT_CARI( ? )}";   

$KD_INST = '1001';  
$KET = '';  
$params = array( 
  array($KD_INST,SQLSRV_PARAM_IN),   
  array($KET, SQLSRV_PARAM_OUT),
);   

/* Execute the query. */  
$stmt3 = sqlsrv_query( $conn, $tsql_callSP, $params);   

if( $stmt3 === false ) {       
  echo "Error in executing statement 3.\n";       
  die( print_r( sqlsrv_errors(), true));
}   

/* Display the value of the output parameters. */     

while( $obj = sqlsrv_fetch_array( $stmt3, SQLSRV_FETCH_ASSOC) ) {
  // SET PARAMETERS - SET TERMS      
  echo $obj['KD_INST'];  
  echo $obj['KET'];  
}

/*Free the statement and connection resources. */  
sqlsrv_free_stmt( $stmt3);  

Semoga membantu dan menginspirasi teman-teman semua. .

Categories: Pemrograman, Tips & Trik

Instalasi Laravel

19 March 2014 Leave a comment

Laravel?? saat pertama mendengar kata tersebut, yang muncul dalam pikiranku adalah ini semacam makanan atau apa??hehehe. . Daripada penasaran, saya langsung meminta pertolongan kepada mbah google.hahaha. . Dan muncul berbagai penjelasan mengenai laravel, salah satunya dari situs ini http://www.sitepoint.com/. Di situs tersebut dijelaskan bahwa laravel merupakan salah satu framework php yang paling menjanjikan dan bakal booming di tahun 2014 ini. (oooh. . laravel itu framework php too..)

Berhubung saya merupakan salah satu orang yang ada dalam dunia pemrograman, rasa penasaran pun begitu besar. Langsung saja saya cari referensi mengenai framework tersebut, dari penjelasan, kelemahan dan kelebihannya dan satu tujuan saya pengen icip-icip.hehehe. .

Ternyata di Indonesia udah banyak orang yang menggunakan framework ini (saya merasa ketinggalan T_T ), ini terbukti dari salah satu website yang menyajikan berbagai isu yang berhubungan dengan laravel, ini websitenya http://id-laravel.com/. Dari sinilah saya tahu bagaimana cara instalasi laravel, dan akan saya tulis ulang di blog saya ini. Semoga bisa di ikuti,hehehe. . .

Tidak seperti framework-framework php yang lainnya yang biasanya kita disuruh untuk mendownload core-framework dalam satu bundle, kita ekstrak dan bisa langsung kita jalankan. .its so easy,hahaha. . .  Laravel memiliki dependensi (ketergantungan) terhadap beberapa library PHP lainnya, Oleh karena itu kita harus mendownload library yang dibutuhkan tersebut secara terpisah.

Pertama kita harus install composer, Composer-lah yang akan mengurusi segala ketergantungan Laravel dengan library lainnya. Dengan kata lain, kita tidak perlu mendownload satu persatu library yang dibutuhkan. Pokoknya terima beres. . .hahaha

Instalasi Composer

Pengguna Windows bisa langsung download Composer Installer, jalankan proses instalasi step by step. Dan bisa langsung di jalankan.

Bagi penggunal Linux dan Mac bisa menjalankan perintah berikut :

curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer

Untuk mengetes apakah instalasi berhasil, ketikkan perintah composer di terminal/console/command prompt Anda.

composer

Instal Laravel

Sebenarnya ada 3 metode penginstalan yang bisa anda pilih

  1. Via composer create-project (recommended)
  2. Download laravel + composer update
  3. Download laravel dan semua dependensi yang dibutuhkan

Via  composer create-project (recommended)

Buka command prompt, masuk ke webroot folder Anda dan jalankan perintah berikut untuk setup aplikasi Laravel :

composer craete-project laravel/laravel sampleApp --prefer-dist

Composer secara otomatis akan mendownload laravel versi terakhir beserta semua library yang dibutuhkan.

Download laravel beserta library nya

2

Jika sudah selesai, buka http://localhost/sampleApp/public, apa yang Anda lihat?

Download laravel + composer update

Download laravel versi terbaru langsung dari github. Ekstrak file zip tersebut ke dalam folder sampleApp di webroot kita, selanjutnya buka command prompt, masuk ke folder tersebut dan jalankan perintah :

php composer.phar install

atau

composer install

Tunggu sampai Composer selesai bekerja, lalu buka http://localhost/sampleApp/public, apa yang Anda lihat?

Download laravel dan semua dependensi yang dibutuhkan

Cara ini sama seperti framewor-framework lain pada umumnya, kita tinggal mendownloadcore-framework laravel kemudian kita ekstrak di webroot folder kita.

Perhatian Cara ini tidak dianjurkan karena file tersebut tidak dijamin up to date. Artinya bisa jadi file yang Anda download bukan merupakan Laravel versi terbaru. Pun demikian dengan library lainnya. Tapi masih oke lah jika Anda hanya sekedar ingin coba-coba.

Selamat anda sudah bisa menginstall laravel di komputer anda,hehehe. .

Semoga membantu 😀

Update gambar dengan yii framework

26 February 2014 Leave a comment

Lama gak posting,hehehe. . .

Pada kesempatan kali ini saya mau berbagi mengenai bagaimana cara update gambar dengan yii framework, sebenarnya tulisan ini merupakan kelanjutan dari postingan saya terdahulu, tentang Upload file di yii framework.

Begini ceritanya, suatu saat kita sudah melakukan upload file namun karena ada sedikit kesalahan, maka perlu melakukan perubahan (update) pada data kita itu. Ada kalanya kita hanya ingin merubah kesalahan pada judul atau konten, tidak merubah gambar yang sebelumnya sudah kita upload.

Mmmm,  sebenernya gampang si logika, ketika field yang menampung gambar kosong, maka kita tidak perlu merubah gambar / gambar terdahulu kita isikan pada gambar sekarang. Ketika field berisi gambar, maka kita mesti ganti / replace. Dengan catatan, pada saat action upload field gambar wajib di isi, dan tidak wajib di isi ketika action update (bisa baca tentang scenario).

Langsung saja, berikut penggalan scriptnya :

controller.php

</pre>
public function actionUpdate($id)
 {

 $model=$this->loadModel($id);
 if(isset($_POST['TmBerita']))
 {
 $temp = $model->image;
 $model->attributes=$_POST['TmBerita'];
 $model->image = CUploadedFile::getInstance($model,'image');
 if($model->image == "") $model->image = $temp; //tambahin kondisi seperti ini
 if($model->save()) {
 if ($model->image != $temp)
 $model->image->saveAs(Yii::app()->basePath .'/../file/berita/'.$model->image); //cek kalo kosong atau filenya sama
 $this->redirect(array('view','id'=>$model->id_berita));
 }
 }
 $this->render('update',array(
 'model'=>$model,
 ));
 }

Dari kode di atas dapat dilihat, kita akan mengupload sebuah file (image ) ke sebuah folder file/berita. .

Kita buat satu variabel untuk mengecek data di database, apakah file gambar isi / kosong

ini scenario di modelnya

array('image','required','on'=>'insert'),

Semoga membantu dan menginspirasi teman-teman semua. .

Categories: Pemrograman, Tips & Trik

Upgrade joomla 1.5.X ke 2.5.X

3 February 2014 3 comments

Sudah lama rasanya saya tidak menulis postingan di sini. Biasa lah, akhir tahun dan awal tahun merupakan saat-saat yang sangat menyita banyak waktu (mungkin).hehehe. .

Beberapa waktu yang lalu, saya diberi tugas oleh atasan untuk melakukan upgrade website joomla dari versi 1.5 ke versi 2.5, website kami memang bikinan tahun 2000, jadi masih pake joomla versi kakek nenek. . :p

Setelah nyari tutorial di internet dan sempet bikin kepala pusing, akhirnya saya nemuin juga cara jitu dan mudah untuk melakukan upgrade website ini. Dibeberapa tutorial menyebutkan bahwa cara paling mudah untuk upgrade versi joomla adalh menggunakan jupgrade, tapi setelah di telusuri ternyata dari vendornya sudah tidak mengeluarkan produk tersebut. Sempet pusing juga, soalnya beberapa alternatif lain menggunakn tools yang berbayar ( kita nyari yang gretongan saja :p ). Sampai akhirnya saya menemukan tools yang sebenarnya sama dengan jUpgrade, cuma ini versi Pro (jUpgradePro). Kalau liat di website resminya si kudu bayar, tapi tenang di sini saya kasih cuma-cuma. . hehehe

Pertama yang perlu diketahui adalah jUpgradePro merupakan tools baru dan mudah untuk melakukan migrasi yang sekarang ditulis untuk Joomla! 2.5 dan Joomla 3.0. jUpgradePro  dirancang untuk membantu administrator dalam melakukan upgrade isi situs mereka ke dalam Joomla baru! 2.5 atau 3.0. jUpgradePRO menawarkan dua metode migrasi yang berbeda: Database atau RESTful.

Langkah untuk melakukan upgrade versi joomla adalah sebagai berikut :

  1. Kita wajib menginstall tools jUpgradePro di website dengan versi joomla 1.5.x kemudian ekstrak.
  2. langung kita install plugin “plg_jupgradepro-restful-3.0.3-j1.5.zip” (saya kira semua sudah terbiasa melakukan instalasi plugin di joomla)
  3. Kemudian ke menu “Plugin Manager” => “System – jUpgrade”
  4. Set enable untuk plugin tersebut, kemudian set kata kunci untuk plugin ini. Catat kata kuncinya, karna ini akan dibutuhkan di proses selanjutnya.
  5. plugin_jupdate_pro
  6. Install joomla versi baru (bisa di download di link berikut 2.5.x) di dalam sebuah folder di root folder akun ftp kita. Sebagai contoh kita buat folder “Upgrade”. Install sesuai dengan petunjuk yang ada ( Proses upgrade akan lebih cepat bila kita juga menginstallkan joomla versi baru di dalam satu server yang sama ).
  7. Kemudian kita install komponen com_jUpgradePRO-3.0.3.zip di joomla versi terbaru (masuk ke administrator)
  8. jupdate
  9. Lalu setting sesuai dengan gambar di atas ( security key = dengan kata kunci yang kita masukkan saat install plugin di no. 2)
  10. Kemudian di administrator versi joomla yang baru masuk ke “Component” => “jUpgradePro
  11. pro
  12. Tunggu sampai proses selesai.

Untuk mengakses versi joomla yang baru kita ketikan alamat http://www.namadomain.com/upgrade dan website anda sudah terupgrade ke versi joomla yang baru.

Untuk melakukan upgrade yang sesungguhnya maka hapus folder joomla di root folder Public html akun ftp anda dan ganti dengan file yang ada di folder “Upgrade

Demikian cara singkat dan mudah untuk melakukan upgrade website joomla kita dari versi 1.5 ke versi 2.5

Semoga membantu. . .

 

Categories: Tips & Trik

Sistem Informasi Pengolahan Data Simpan Pinjam Koperasi

23 January 2014 38 comments

Sistem Informasi Pengolahan Data Simpan Pinjam Koperasi ini  dibangun dengan menggunakan bahasa pemrograman PHP dan database MySql, berbasis web sehingga memungkinkan untuk di upload ke hosting anda dan diakses secara online.

Gambaran umum

Sistem ini menghitung besarnya simpanan anggota, pinjaman anggota dan angsuran anggota tiap bulannya. Besar simpanan dan angsuran tiap bulan dapat disesuaikan dengan AD/ART Koperasi masing-masing. Laporan yang dihasilkan bermacam, dari laporan anggota, laporan simpanan anggota, laporan pinjaman anggota, laporan angsuran anggota, laporan tunggakan angsuran, dll.

Fitur

Sistem ini terdiri dari beberapa modul, antara lain :

  1. Modul Anggota
  2. Modul Petugas
  3. Modul Simpanan
  4. Modul Pinjaman
  5. Modul Angsuran
  6. Modul Laporan

Screenshot

Berikut saya sertakan beberapa screenshot tampilannya :

9 10 11 bukubesar2 1 2 3 4 5 6 6a 7 7a 8

Categories: Aplikasi