Tampilkan postingan dengan label Web. Tampilkan semua postingan

Tampilan Website cepat dan mudah dengan Layoutit

 

Postingan kali ini mengena membuat tampilan/UI website dengan cepat dan mudah, dengan memanfaatkan bootstrap yang sudah disediakan di website http://www.layoutit.com/ .
Di website ini anda akan mengedit tampilan website anda sesuai dengan yang anda inginkan.

caranya gampang, anda tinggal buka link website http://www.layoutit.com/ selanjutnya pilih tombol Start Now With Bootstrap, kemudian, silhakan anda mengedit dengan selera anda dengan menggunkan TOOL disebelah kirinya.
Read More

RESPONSIVE FULL WIDTH TABS

Postingan kali ini mengenai ,sesuatu yang menarik dalam pembuatan website. Kebetulan kali ini saya dapatkam sesuatu yang menarik dalam membuat tab pada website dan responsive jika kita buka di handphone. Kode ini saya dapatkan di link : http://tympanus.net/codrops/2014/03/21/responsive-full-width-tabs/
Bagi yang coba-coba bisa di download pada link di atas.
Sangat menrik lo...coba deh.

selain tampilannya yang keren, juga ini sangat membantu bagi kita yang membuat aplikasi toko atau stok barang yang berbasis web.
Read More

Apa itu bahasa pemrograman php ?


PHP singkatan dari PHP: Hypertext Preprocessor
PHP adalah bahasa pemrograman yang bisa disisipkan ke dalam script HTML dan berjalan di sisi server, biasanya dipakai untuk membuat website agar lebih dinamis. Selain itu menggunakan bahasa PHP kita bisa terhubung dengan database dan banyak lagi kegunaanya.
PHP merupakan server-side scripting language, seperti ASP
Skrip PHP dieksekusi di server, PHP mendukung banyak database (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, dll), PHP merupakan perangkat lunak open source.

Sejarah PHP

Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.
Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak programer yang tertarik untuk ikut mengembangkan PHP.
Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.
Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP diubah menjadi akronim berulang PHP: Hypertext Preprocessing.
Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek.

Program Hello World

Program Hello World yang ditulis menggunakan PHP adalah sebagai berikut:
<?php
echo “Hello World”;
?>

Program bilangan Fibonacci

Berikut ini adalah contoh program yang relatif lebih kompleks yang ditulis dengan menggunakan PHP. Contoh program ini adalah program untuk menampilkan 20 bilangan pertama dari deret bilangan Fibonacci.
<?php
function fibonacci_seq( $panjang ) {
for( $l = array(0,1), $i = 2, $x = 0; $i < $panjang; $i++ )
$l[] = $l[$x++] + $l[$x];
return $l;
}
fibonacci_seq(20);
// Angka “20″ dapat diganti sesuai keinginan
?>

Kelebihan PHP Dari Bahasa Pemrograman Lain :

Beberapa kelebihan PHP dari bahasa pemrograman web, antara lain:
  1. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaanya.
  2. Web Server yang mendukung PHP dapat ditemukan dimana – mana dari mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah.
  3. Dalam sisi pengembangan lebih mudah, karena banyaknya milis – milis dan developer yang siap membantu dalam pengembangan.
  4. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak.
  5. PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system.

Tipe data

PHP memiliki 8 (delapan) tipe data yaitu :
  1. Integer
  2. Double
  3. Boolean
  4. String
  5. Object
  6. Array
  7. Null
  8. Nill
  9. Resource
Mengapa kita menggunakan php 
Untuk membuat Web yang bersifat statis  Anda dapat menggunakan tool-tools Seperti Adobe Photoshop, DreamWeaver. Tetapi untuk membuat Website dinamis yang Berisi CMS(Content manajemen Sistem) Dimana terdapat Form input seperti Pencarian, Penambahan Artikel baru, Update, Delete dan Lain-lain yang mana membutuhkan proses ke Server maka disini kita bisa membutuhkan php. Lihat ilustrasi gambar berikut ini:
kursus web,kursus komputer,kursus webmaster,kursus web design,kursus moodle,pelatihan moodle,seminar seo,kursus joomla,kursus sql server,belajar komputer,kursus jaringan,kursus lan,kursus ms office
Kursus komputer dengan fasilitas lengkap dan biaya murah materi web design,sql server,Jaringan LAN,Adobe Photoshop,paket office,dll;http://www.itkomputer.com
Dari ilustrasi gambar diatas browser mozila, internet explorer yang berjalan disisi penguna.Browser membaca format penulisan dengan html. Sedangkan Format penulisan dengan php berjalan pada sisi server(Apache).
Paket Apache, PHP dan MySQL Instant
XAMPP merupakan salah satu paket installasi Apache, PHP dan MySQL instant yang dapat kita gunakan untuk membantu proses installasi ketiga produk tersebut. Selain paket installasi instant XAMPP versi 1.6.4 juga memberikan fasiltias pilihan pengunaan PHP4 atau PHP5. Untuk berpindah versi PHP yang ingin digunakan juga sangat mudah dilakukan dengan mengunakan bantuan PHP-Switch yang telah disertakan oleh XAMPP, dan yang terpenting XAMPP bersifat free atau gratis untuk digunakan.
XAMPP menyediakan beberapa paket yang bisa diperoleh dari
http://www.apachefriends.org, pada artikel modul ini saya mengunakan Basic ackage. Berikut langkah-langkah proses installasi XAMPP: Jika belum memiliki file installasi, download file installasi tersebut dari web berikut http://www.apachefriends.org atauhttp://sourceforge.net/projects/xampp/
Prinsip Kerja PHP
System kerja dari PHP diawali dengan permintaan yang berasal dari halaman website oleh browser. Berdasarkan URL atau alamat website dalam jaringan internet, browser akan menemukan sebuah alamat dari webserver, mengidentifikasi halaman yang dikehendaki, dan menyampaikan segala informasi yang dibutuhkan oleh webserver.
Selanjutnya webserver akan mencarikan berkas yang diminta dan menampilkan isinya di browser. Browser yang mendapatkan isinya segera menerjemahkan kode HTML dan menampilkannya.
Lalu bagaimana apabila yang dipanggil oleh user adalah halaman yang mengandung script PHP ? Pada prinsipnya sama dengan memanggil kode HTML, namun pada saat permintaan dikirim ke web-server, web-server akan memeriksa tipe file yang diminta user. Jika tipe file yang diminta adalah PHP, maka akan memeriksa isi script dari halaman PHP tersebut.
Apabila dalam file tersebut tidak mengandung script PHP, permintaan user akan langsung ditampilkan ke browser, namun jika dalam file tersebut mengandung script PHP, maka proses akan dilanjutkan ke modul PHP sebagai mesin yang menerjemahkan script-script PHP dan mengolah script tersebut, sehingga dapat dikonversikan ke kode-kode HTML lalu ditampilkan ke browser user.
selain itu dalam pembuatan website menggunakan PHP sekarang banyak sekali ditemui CMS :seperti Jomla, wordpress, Framework : seperti laravel, Codeigniter, YII, dan pasti semuanya menggunakan OOP. Jadi banyak hal yang bisa kita pelajari disini.
Smoga bermanfaat:)
Read More

BERKREASI DENGAN PLUGIN JQUERY UI


jQuery UI (user interface merupakan plugin yang paling populer di kalangan programmer jQuery. Karena sampai-sampai dijadikan satu manual dengan manual jQuery di website resminya. jQuery UI dibuat oelh Paul Bakaus yang bekerja sama dengan stefan Petre untuk menciptakan efek-efek yang canggih dan komponen librari pelengkap jQuery, diantaranya :
-          Accordion
-          Datepicker
-          Tabs
-          Dialog
-          Progressbar
-          Slider
-          Effect/animasi
-          Drag and Drop
-          Dan lain-lain
Selanjutnya, bagian berikut akan membahas cara penggunaan beberapa komponen library dari jQuery UI.

Instalasi jQuery UI
1.      Download jQuery UI di http://jquery.com/  maka akan tampil halaman downloadnya, klik aja langsung link current (stable), maka file jQuery UI (jquery-ui-1.7.2.custom.rar) akan tersimpan di komputer anda.

2.      Filenya masih berbentuk kompresi (jquery-ui-1.7.2.custom.rar), oleh karena itu gunakan program winzip/winrar untuk mengekstraknya, nanti semua fule jquery-ui akan ditemukan pada folderjquery-ui-1.7.2.custom

3.      Untuk mencobanya, silahkan klik versi demonya yang ada di folder jquery-ui-1.7.2.custom/development-bundle/demis, nanti klik 2x file index.html pada folder tersebut, maka akan tampil halaman demo dari jQuery UI, misalnya coba library Tabs pada bagian widget,maka demonya akan tampil dibagian tengah.
Silahkan dicoba beberapa demo library jQuery UI lainnya, seperti draggable, accordion, progressbar, Dialog, Effect, dan lain-lain. Keren kan???
Sekarang pertanyaannya, bagaimana menerapkan library jQuery UI pada website kita? Ikuti aja pembahasan berikutnya.


BAB VI
DATEPICKER

Datepicker berfungsi untuk mengambil tanggl dari sistem kelender yang ada di komputer,sehingga memudahkan kita dalam memilih tanggal, karena ditampilkan secara keseluruhan dan menarik. Oke langsung saja kita jelajahi fiturnya.
Datepicker.html
1.  <html>
2.  <head>
3.  <title>Menggunakan Datepicker</title>
4.  <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5.  <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6.  <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7.  <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8.   
9.  <script type="text/javascript">
10.         $("document").ready(function(){
11.         $("#tanggal").datepicker();
12.          
13.         });
14.         </script>
15.         </head>
16.         <body>
17.         Masukkan tanggal :<input id="tanggal" type="text">
18.         </body>
19.         </html>


Datepicker Format Bahasa Indonesia
Pada contoh kedua, kita akan mengubah format tanggal standar datepicker (bulan/tanggal/tahun) menjadi format tanggal berbahasa indonesia (tanggal/bulan/tahun).
Caranya cukup mudah, kita tinggal panggil library penanggalan bahasa indonesia yang sudah disediakan oleh jquery UI, yaitu ui.datepicker-id.js yang terdapat pada folder jQueryUI. Untuk lebih jelasnya, lihat skrip berikut (perhatikan teks yang ditebalkan):

Datepicker2.html
1.  <html>
2.  <head>
3.  <title>Menggunakan Datepicker</title>
4.  <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5.  <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6.  <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7.  <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8.  <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9.  <script type="text/javascript">
10.         $("document").ready(function(){
11.         $("#tanggal").datepicker();
12.          
13.         });
14.         </script>
15.         </head>
16.         <body>
17.         Masukkan tanggal :<input id="tanggal" type="text">
18.         </body>
19.         </html>


Sekarang coba jalankan skrip datepicker2.html di browser, kemudian klik pada input text di sebelah kanan teks Masukkan tanggal, maka akan tampil pilihan tanggal yang sudah berbahasa indonesia dan berformat indonesia (tanggal.bulan/tahun).

Mengubah Format Penanggalan Datepicker
Pada contoh ketiga, kita masih akan mengubah format tanggal standar dari datepicker (mm/dd/yyy) Ã  contohnya tanggal 7 Februari 2010 ditulis (02/07/2010 menjadi format tanggal yang kita inginkan (lebih familiar), misalnya kita akan menampilkannya menjadi (07 Februari 2010)
Caranya, gunakan fungsi dateformat dari datepicker. Untuk lebih jelasnya, lihat skrip berikut (perhatikan teks yang ditebalkan):
1.  <html>
2.  <head>
3.  <title>Menggunakan Datepicker</title>
4.  <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5.  <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6.  <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7.  <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8.  <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9.  <script type="text/javascript">
10.         $("document").ready(function(){
11.         $("#tanggal").datepicker({
12.         dateFormat:"dd MM yy"
13.         });
14.         });
15.         </script>
16.         </head>
17.         <body>
18.         Masukkan tanggal :<input id="tanggal" type="text">
19.         </body>
20.         </html>



Menampilkan Pilihan Bulan dan Tahun
Pada contoh ke empat, kita akan membuat bulan dan tahun ditampilkan dalam bentuk combobox, nantinya pengguna dapat lebih bebas dan mudah dalam memilih bulan dan tahun yang diinginkannya.
Caranya, gunakan fungsi changeMonth dan changeYear dari datepicker. Untuk lebih jelasny, lihat skrip berikut (perhatikan teks yang ditebalkan)
1.  <html>
2.  <head>
3.  <title>Menggunakan Datepicker</title>
4.  <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5.  <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6.  <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7.  <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8.  <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9.  <script type="text/javascript">
10.         $("document").ready(function(){
11.         $("#tanggal").datepicker({
12.         dateFormat:"dd MM yy",
13.         changeMonth:true,
14.         changeYear:true
15.         });
16.         });
17.         </script>
18.         </head>
19.         <body>
20.         Masukkan tanggal :<input id="tanggal" type="text">
21.         </body>
22.         </html>

Memilih Tanggal menggunakan tombol
Kita lanjut pada contoh kelima, dimana kita juga bisa menampilkan pilihan tanggal (datepicker) menggunakan perantara sebuah tombol.
Caranya, gunakan fungsi showOn dan buttonText dari datepicker. Untuk lebih jelasnya, lihat skrip berikut (perhatikan teks yang ditebalkan)

Skrip datepicker5.html
1.  <html>
2.  <head>
3.  <title>Menggunakan Datepicker</title>
4.  <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5.  <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6.  <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7.  <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8.  <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9.  <script type="text/javascript">
10.         $("document").ready(function(){
11.         $("#tanggal").datepicker({
12.         dateFormat:"dd MM yy",
13.         changeMonth:true,
14.         changeYear:true,
15.         showOn:"button",
16.         buttonText:"Buka Datepicker"
17.         });
18.         });
19.         </script>
20.         </head>
21.         <body>
22.         Masukkan tanggal :<input id="tanggal" type="text">
23.         </body>
24.         </html>

Sekarang coba jalankan skrip datepicker5.html di browser, kemudian klik tombol Buka Datepicker, maka akan tampil pilihan tanggal dari datepicker.

Biasanya, tombol akan lebih menarik kalau berbentuk gambar, dengan kata lain gambar dijadikan sebuah tombol. Oleh karena itu, mari kita coba mengganti tombol standar menjadi tombol dalam bentuk gambar.
Pertama, siapkan dulu gambar yang akan dijadikan tombolm tapi untuk lebih tepatnya, gunakan saja tombol gambar yang sudah disediakan jquery-ui, yaitu calendar.gif berada di folderdevelop/demos/datepicker/images/.
Kemudian gunakan fungsi showOn, buttonImage, dan buttonImageOnly dari datepicker. Untuk lebih jelasnya, lihat skrip berikut ini (perhatikan teks tebal)

1.  <html>
2.  <head>
3.  <title>Menggunakan Datepicker</title>
4.  <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5.  <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6.  <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7.  <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8.  <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9.  <script type="text/javascript">
10.         $("document").ready(function(){
11.         $("#tanggal").datepicker({
12.         dateFormat:"dd MM yy",
13.         changeMonth:true,
14.         changeYear:true,
15.         showOn:"button",
16.         buttonImage: "develop/demos/datepicker/images/calendar.gif",
17.         buttonImageOnly:true
18.         });
19.         });
20.         </script>
21.         </head>
22.         <body>
23.         Masukkan tanggal :<input id="tanggal" type="text">
24.         </body>
25.         </html>

Sekarang coba jalankan skrip datepicker6.html di browser, maka tombol untuk menampilkan datepicker sudah berubah menjadi tombol dalam bentuk gambar.


Mengganti Themes Datepicker
Selanjutnya, kita akan berkreasi lagi dengan datepicker, kali ini kita akan mencoba mengganti themes standar dari datepicker. Perlu diketahui bahwa seluruh themes yang bisa digunakan oleh komponen library jQuery UI (bukan hanya datepicker saja) bisa ditemukan pada folderdevelop/themes/
Biasanya themes standar yang kita gunakan pada contoh-contoh sebelumnya adalah themes baseyang dinyatakan oelh skrip berikut :
<link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>

Themes lainnya yang bisa dicoba adalah hot sneaks, le-frog, sunny, ui-ligntness, excite-bike, dan lainnya. Cara mengganti themes sangatlah mudah, kita cukup mengganti nama foldernya saja pada bagian pemanggilan file CSS (ui.all.css). untuk lebih jelasnya, lihat skrip berikut:

1.  <html>
2.  <head>
3.  <title>Menggunakan Datepicker</title>
4.  <link type="text/css" href="develop/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet"/>
5.  <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6.  <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7.  <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8.  <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9.  <script type="text/javascript">
10.         $("document").ready(function(){
11.         $("#tanggal").datepicker({
12.         dateFormat:"dd MM yy",
13.         changeMonth:true,
14.         changeYear:true,
15.         showOn:"button",
16.         buttonImage: "develop/demos/datepicker/images/calendar.gif",
17.         buttonImageOnly:true
18.         });
19.         });
20.         </script>
21.         </head>
22.         <body>
23.         Masukkan tanggal :<input id="tanggal" type="text">
24.         </body>
25.         </html>

Setelah dijalankan, tampilan datepicker akan terlihat berbeda dari yang sebelumnya,

Animasi Datepicker
Efek animasi yang akan kita gunakan adalah efek drop, dimana objek/datepicker terlihat seperti jatuh.
Untuk menrapkan efek drop pada datepicker, kita membutuhkan dua buah file yaitu effect.drop.jsdan effect.core.js. kedua file tersebut sudah disediakan jQuery UI di folder development-bundle/ui, jadi tinggal kita panggil saja. Kemudian kita juga perlu fungsi showAnim danshowOptions dari datepicker. Perhatikan skrip dibawah ini:

Skrip datepicker8.html


1.  <html>
2.  <head>
3.  <title>Menggunakan Datepicker</title>
4.  <link type="text/css" href="develop/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet"/>
5.  <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6.  <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7.  <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8.  <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9.   
10.         <script type="text/javascript" src="develop/ui/jquery.effects.core.js"></script>
11.         <script type="text/javascript" src="develop/ui/jquery.effects.drop.js"></script>
12.          
13.         <script type="text/javascript">
14.         $("document").ready(function(){
15.         $("#tanggal").datepicker({
16.         showAnim:"drop",
17.         showOptions:{direction:"up"}
18.         });
19.         });
20.         </script>
21.         </head>
22.         <body>
23.         Masukkan tanggal :<input id="tanggal" type="text">
24.         </body>
25.         </html>
sumber : http://ononias.blogspot.com/2011/03/pengenalan-jquery-dengan-html-v.html
Read More
Langganan: Postingan ( Atom )