Blue Fire Pointer

Senin, 15 Agustus 2016

Download Aplikasi Siakad Kampus Berbasis Web

Salam Programer.. Disini saya akan share aplikasi sistem informasi akademik berbasis web
dimana aplikasi ini terdapat 3 user yaitu admin dosen dan mahasiswa
admin dapat mengatur semua sistem yang ada, sedangkan dosen bisa input nilai dan edit data pribadi maupun jadwal mengajar. sedangkan mahasiswa bisa kontark krs, cetak krs, cetak khs dan cetak transkrip nilai. langsung saja lihat penampakannya gan..

Login Mahasiswa Gan
Halaman Utama Mahasiswa
Data Pribadi Mahasiswa
Lihat Nilai Mahasiswa
Jadwal Kuliah Mahasiswa
KRS Mahasiswa
Cetak KHS
Cetak KRS Mahasiswa
Cetak Transkrip Nilai Mahasiswa
Login Dosen
Halaman Utama Dosen

Data Pribadi Dosen
Data Mengajar Dosen
Jadwal Mengajar Dosen
Data Nilai Mahasiswa
Data KRS
Login Administrator
Halaman Utama Administrator
Kelola User
Kelola Modul
Kelola Fakukultas
Kelola Jurusan
Kelola Kelas
Kelola Mata Kuliah
Kelola Kurikulum
Kelola Jadwal
Kelola Dosen
Kelola Dosen Mengajar
Kelola Data Mahasiswa


Jika Membutuhkan Silahkan Sedot Gan
Download
Terimakasih Sudah Berkunjung
Jika ada pertanyaan silahkan chat langsung via WA

Rabu, 10 Agustus 2016

5 Situs Terbaik untuk Belajar Coding Gratis | HTML, CSS, Javascript, PHP, JQuery, dan SQL

Pernah dengar tentang HTML, CSS, Javascript, PHP, JQuery, dan SQL? Minimal pengguna internet pernah mendengar atau mempelajari salah satunya. Misalnya untuk membuat website atau blog memerlukan (code) kode HTML, CSS, dan Javascript. Kode-kode tersebut terlihat rumit untuk dipelajari, namun itulah yang membuat situs-situs ini berambisi untuk memberikan pengajaran tentang coding kepada semua penggunanya GRATIS.

Apa saja kelima website tersebut? Ketahui dan pelajari!


 <5 Situs Terbaik untuk Belajar Coding> 



1. W3Schools.com


W3school adalah website nomor 1 yang paling membantu pemula untuk belajar bahasa pemrograman dari awal hingga akhir. Cara belajar di W3school adalah agan tinggal pergi ke websitenya dan pilih bahasa mana yang sobat ingin pelajari. pengalaman ane gan enak banget sangat lengkap fiturnya. Pilihan
HTML/CSS (HTML5/CSS3), Javascript, PHP, ASP, XML, AJAX, jQuery


2. CodeAcademy.com


Selain w3schools.com, CodeAcademy.com adalah salah satu yang terbaik untuk belajar programing. Yang membuat website ini ane rekomendasikan adalah cara pengajarannya yang menyenangkan dan fiturnya yang banyak. Disini agan bisa belajar HTML/CSS, PHP, jQuery, JavaScript, Python, Ruby


3. CodeAvengers.com


Keunikan dari CodeAvengers.com adalah agan harus melewati beberapa level untuk mencapai level tertinggi. Ada 3 level yang harus agan selesaikan namun juga agan akan diberi tutorial sebelum mengerjakan level.  Pilihan yang bisa agan coba HTML/CSS (HTML5/CSS3), JavaScript


4. CodeSchool.com


Disinilah tempat para pemula memulai belajar programing, disini juga sangat menyenangkan karena adanya tutorial lengkap. Kode yang bisa agan pelajari di CodeSchool.com adalah HTML/CSS, Ruby on Rails, JavaScript, iOS


5. TeamTreeHouse.com


TeamtreeHouse sama seperti codeschool yang menyediakan tampilan yang simpel dan mudah untuk belajar coding. Pilihan HTML/CSS, iOS, Android, Wordpress


Hanya itu? Tidak! ada sangat banyak situs untuk belajar coding, baik untuk pemula atau lanjutan. Satu lagi situs untuk belajar coding yaitu Coding.com.



Ok, cukup itu saja semoga bisa bermanfaat!

Tips Dan Trik Jadi Programer

Sudah lama sekali rasanya saya tidak share tentang pemrograman ya, kali ini saya mau share mengenai tips bagaimana membuat kebiasaan yang baik dalam pemrograman dan tips bagaimana cara membuat program dengan tingkat error yang minim. Contoh kasus untuk web  programming berikut tips nya :
1. Hindari pikiran “mulai dari mana ya?”
Ini juga persis seperti waktu pertama saya mengenal pemrograman, dikepala yang ada selalu berpikir “saya mau mulai dari mana ya”, menurut saya yang benar adalah “apa yang mau saya buat”, contoh kamu mau buat form login, baru kamu pikirkan untuk membuat form login apa saja yang saya butuhkan ya?, misal kamu butuh form dengan dua field, berarti kamu cari tutorial buat formnya sama fieldnya, setelah selesai dan bisa kamu mau buat gimana lagi di form itu, cari saja di mbah google banyak kok tutorial pemrograman apalagi php, jadi belajar yang butuh dulu jangan berpikir mulai dari mana.
2. Jangan menghapal script
Percaya sob mau belajar sampai kapan kalau masih menghafal script, sampai sekarang saja saya ga' pernah hapal tuh script yang sangat fundamental yang perlu kamu latih bukan menghafal script tapi latih logika kenali lebih dalam seperti kondisi if else,  boolean true false, data array, pengulangan dan lain-lain bro menurut saya ini yang penting.
3. Gunakan dengan notepad++
Saya dulu adalah pecinta editor dreamweaver, dari macromedia hingga dreamweaver cs3, suatu hari saat pertama saya bekerja di perusahaan sebelumnya, saya melamar menjadi programmer dan tidak lulus (karna memang newbie kurang ahli heheh…), saya mengobrol dengan programmer senior disana, ada satu kalimat yang saya ingat “jangan membiasakan membuat program pakai aplikasi editor, apalagi seperti dreamweaver bikin logika jadi kurang tajam…” kata senior programmer, dengan heran saya tanya “memangnya kenapa om..?”. singkat cerita beliau menjelaskan bahwa editor tersebut terlalu visual sehingga bagi pengguna  jadi terbiasa menggunakan mata daripada logika pikiran, sehingga bila ketemu kasus yang tidak ada di editor tersebut, akan bingung sendiri, selain itu tidak semua perusahaan memiliki aplikasi seperti dreamweaver yang nantinya  akan membuat kita ketergantungan sama software, biasakan saja dengan notepad atau notepad++, jadi dimanapun kita bekerja tidak terlalu ketergantungan alias bisa, karena hampir semua sistem operasi punya editor notepad.

4. Biasakan mengetik bukan drag drop
Seperti yang saya bilang sebelumnya, dengan mengetik secara tidak langsung kita melatih otak memori kita, sehingga sedikit demi sedikit membuat si otak makin tajam dengan script yang dibuat, memang melelahkan tapi betul-betul berkualitas daya pikir kita mengenai logika bro. jangan biasakan copypaste, walaupun sudah ada contoh usahakan mengetik (kecuali lu emang dah hafal banget sama tuh script…), percaya deh kamu biasakan seperti ini, cuma cukup hitungan bulan kamu pasti sudah menguasai pemrograman, tidak hanya web sih mungkin bisa bahasa yang lain. Sampai sekarang saya masih membiasakan menggunakan dengan notepad++ dan alhasil saya lebih mengenal dan lebih imajinatif tentang script yang secara tidak langsung lama-lama script jadi hafal.


5. Selalu tambahkan tag penutup sebelum isi
Maksudnya begini guys, biasanya seperti waktu awal-awal saya belajar program itu seperti ngetik di word lurus aja lempeng, tidak ada jarak pokoknya asal asalan deh, biar meminimalisir kesalahan selalu awali pemrograman dengan tag pembuka kemudian tutup, contoh
 <html>
Isi… isi da nisi semua koding disini pas di tes error hanya karena kurang tutup kurawal atau tanda titik dua, hehehe (biasa bro…)
Yang bener buat tag pembuka seperti ini
 <html>
Buat lagi tag penutup seperti ini,
</html>
Kemudian tengahnya baru diisi seperti ini bro
<html> isi kode kamu disini </html>
Jangan lupa untuk selalu memberi jarak kedalam biar makin minim kesalahan error
6. Lakukan dan coba… pasti ketagihan
Bukan kalian sendiri kok, saya juga sama waktu pertama liat koding, mau muntah rasanya boro-boro belajar, kayaknya dah neg duluan bro. memang paling susah adalah mulai menyukai tapi kalau tidak pernah nyobain yakin tidak akan pernah suka, alhasil ga akan pernah bisa bro, action aja, coba saja dulu kalau sudah pernah sekali dan berhasil dalam eksperimen, dijamin akan pengen lagi bikin yang lain, so jangan menyerah dan action bro ane akan selalu ngedukung hehehe.
Nah itu aja gan 6 tips cara cepat jadi programmer mudah-mudah bisa jadi inspirasi dan mau mulai membuat program, jadi buat bisa program ga sulit kan hehehe sampai ketemu lagi di posting berikutnya.

Minggu, 07 Agustus 2016

Tutorial Membuat Upload File Di CodeIgniter

Halo para Sahabat, sebelumnya saya minta maaf kepada anda semua karena saya sudah agak lama tidak pernah update postingan lagi di blog ini, dikarenakan saya dalam proses pembuatan Skripsi , jadi saya mohon pengertian sahabat sekalian. Untuk memuaskan kerinduan para sahabat dengan ilmu-ilmu baru yang anda dapatkan dari blog ini, saya akan memberikan sebuah tutorial php yang sangat bermanfaat bagi kita semua. Disini kita akan membahas Bagaimana Cara Membuat Upload File dengan Menggunakan FrameWork CodeIgniter PHP.

Upload File Dengan CodeIgniter PHP

Pada Hakikatnya didalam CodeIgniter untuk melakukan uplad file kita telah diberikan class-nya untuk memudahkan kita para developer, dan kali ini kita akan membahas class tersebut.
Marikita bahas tahap demi tahap dibawah ini :

1. Buat file upload_form.php dan letakkan pada application/views dan ketikkan scriptnya seperti berikut :

<html>
<head>
<title>Upload Form By Belajar Pintar PHP </title>
</head>
<body>
<?php echo $error;?>
<?php echo form_open_multipart('upload/do_upload');?>
<input type="file" name="userfile" size="20" />
<br /><br />
<input type="submit" value="upload" />
</form>
</body>
</html>
2. Lalu buat file upload_success.php dan letakkan pada application/views dan isi scriptnya seperti berikut :

<html>
<head>
<title>Upload Form By Belajar Pintar PHP </title>
</head>
<body>
<h3>File anda telah berhasil diupload </h3>
<ul>
<?php foreach ($upload_data as $item => $value):?>
<li><?php echo $item;?>: <?php echo $value;?></li>
<?php endforeach; ?>
</ul>
<p>
<?php echo anchor('upload', 'Upload File lainnya !'); ?>
</p>
</body>
</html>
3. Jika sudah membuat file-file untuk views, sekarang kita membuat file untuk controllers. Buat fileupload.php dan lettakan di application/controllers/ dengan script berikut :
<?php
class Upload extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper(array('form', 'url'));
}
function index()
{
$this->load->view('upload_form', array('error' => ' ' ));
}
function do_upload()
{
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size']    = '100';
$config['max_width']  = '1024';
$config['max_height']  = '768';
$this->load->library('upload', $config);
$this->upload->initialize($config);
if ( ! $this->upload->do_upload())
{
$error = array('error' => $this->upload->display_errors());
$this->load->view('upload_form', $error);
}
else
{
$data = array('upload_data' => $this->upload->data());
$this->load->view('upload_success', $data);
}
}
}
?>

Berikut saya Uraikan sedikit penjelasan mengenai upload.php :

$this->load->helper(array('form', 'url')); Artinya dapat dihapus jika anda telah mendefinisikanya pada config/autoload.
$config['upload_path'] = './uploads/'; lokasi atau folder yang akan menmpung file jadi buat terlebih dahulu folder uploads di folder web CI anda. ( Buat folder baru penyimpanan file)
$config['allowed_types'] = 'gif|jpg|png'; tipe file yang diizinkan untuk diupload, hal ini dapat disesuaikan dengan kebutuhan.
$config['max_size'] = '100';$config['max_width'] = '1024';$config['max_height'] = '768'; ukuran file dan lebar panjang untuk gambar, hal ini juga dapat disesuaikan sesuai dengan kebutuhan.

Jika semua tahap yang diatas telah selesai anda buat dengan benar, sekarang anda tinggal mencoba dengan masuk ke link http://localhost/folderCI/upload.

Tutorial Membuat Kalkulator Sederhana Dengan AJAX dan PHP


Membuat Kalkulator Sederhana dengan Ajax Jquery PHP

Halo sahabat Belajar Pintar PHP, Setelah sebelumnya saya membagikan kepada anda semua sebuah source code mengenai cara membuat kalkulator online dengan php , kali ini saya juga akan membagikan kepada anda sebuah tutorial sekaligus source code Ajax mengenai cara membuat kalkulator dengan menggunakan ajax jquery serta php. Tapi bagi anda yang belum mengerti apa itu ajax, jangan berkecil hati karena anda dapat mengetahuinya melalui postingan saya sebelumnya mengenai Dasar Pemahaman Ajax yang harus diketahui oleh pemula . Oke mungkin sebagian dari anda tidak sabar lagi ingin mengetahuinya, oleh karena itu mari kita langsung bahas satu-persatu dibawah ini.
Dalam pembuatan kalkulator dengan ajax ini kita juga menggunakan fungsi sebuah form yang berguna untuk men-submit hasil dari perhitungan kita agar diproses oleh kode php yang kita buat. Buat anda yang belum mengerti cara membuat submit form menggunakan ajax jquery dan php , anda bisa baca disini , dan bagi anda yang sudah mengetahuinya, mari kita lanjut ketopik pembahasan kita yang pertama.

1. Buat sebuah halaman html dengan nama kalkulator.html , lalu ketikkan atau copy-paste saja seluruh script dibawah ini kedalamnya.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kalkulator sederhana dengan Ajax</title>
<script type="text/javascript" src="kalkulator.js"></script>
</head>
<body>
<h1>Kalkulator Sederhana dengan AJAX PHP</h1>
<form name="form1">

<!-- input bilangan pertama -->
<input type="text" id="bil1" />
<!-- pilihan jenis operasi -->
<select id="operasi">
<option value="penjumlahan">dijumlahkan dengan</option>
<option value="pengurangan">dikurangkan dengan</option>
<option value="perkalian">dikalikan dengan</option>
<option value="pembagian">dibagi dengan</option>
</select>
<!-- input bilangan kedua -->
<input type="text" id="bil2" /><br />
<!-- tombol hitung -->
<input type="button" value="Hitung" onclick="hitung()" />
</form>
<!-- bagian untuk menampilkan output -->
<p><div id="output" /></p>
</body>
</html>

Halaman diatas berfungsi sebagai halaman utama sekaligus halaman tempat penginputan angka yang akan diproses.

2. Buat halaman php dengan nama kalkulator.php dan kemudian ketikkan atau copy-pastekan seluruh script php dibawah ini kedalamnya

<?php
header('Content-Type: text/xml');
$bil1 = $_GET['bil1'];
$bil2 = $_GET['bil2'];
$op = $_GET['op'];
echo '<output>';
if ($op == "penjumlahan") $hasil = $bil1 + $bil2;
else if ($op == "pengurangan") $hasil = $bil1 - $bil2;
else if ($op == "perkalian") $hasil = $bil1 * $bil2;
else if ($op == "pembagian")
{
if ($bil2 == 0) $hasil = "(ERROR) Divide by zero";
else $hasil = $bil1 / $bil2;
}
echo "Hasil perhitungannya adalah : ". $hasil;
echo '</output>';
?>


Halaman php ini berfungsi untuk halaman proses inti dari apa yang kita input pada halaman kalkulator.html.

3. Selanjutnya buat sebuah halaman Javascript dengan nama kalkulator.js, lalu copy-pastekan saja seluruh script dibawah ini kedalamnya


var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject()
{
var xmlHttp;
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlHttp = false;
}
}
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}

if (!xmlHttp) alert("Obyek XMLHttpRequest gagal dibuat");
else
return xmlHttp;
}
function hitung()
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// mengambil data input dari elemen bernama bil1 dan dikonversi
// ke float / riil supaya dapat dioperasikan secara aritmatika
bil1 =
parseFloat(encodeURIComponent(document.getElementById("bil1").value));
// mengambil data input dari elemen bernama bil2 dan dikonversi
// ke float / riil supaya dapat dioperasikan secara aritmatika
bil2 =
parseFloat(encodeURIComponent(document.getElementById("bil2").value));
// mengambil data input dari elemen bernama operasi
operasi =
encodeURIComponent(document.getElementById("operasi").value);
// proses perhitungan operasi dilakukan di script kalkulator.php
xmlHttp.open("GET", "kalkulator.php?bil1=" + bil1 + "&bil2=" + bil2 +
"&op=" + operasi, true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
}
else
setTimeout('hitung()', 1000);
}
function handleServerResponse()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
hasil = xmlDocumentElement.firstChild.data;
document.getElementById("output").innerHTML = hasil;
// setTimeout('process()', 1000);
}

else
{
alert("Ada masalah dalam koneksi ke server: " +
xmlHttp.statusText);
}
}
}
Nah, halaman ini merupakan halaman yang berfungsi sebagai perantaran antara halaman input "kalkulator.html" dengan halaman proses "kalkulator.php" , jika anda sudah membaca postingan saya mengenai dasar pemahaman ajax bagi pemula tadi, maka diharapkan anda sudah mengerti dengan yang saya maksud.

Untuk menjalankan program tersebut, bagi yang belum tahu , anda dapat mengetikkan pada address bar browser anda masing-masing "http://localhost/calculator/kalkulator.html" tapi jangan sampai lupa mengaktifkan "Apache" bagi anda yang menggunakan Xampp.

Tutorial Dasar JQuery

JQuery adalah suatu framework (library) Javascript yang menggambarkan bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan keunggulan yang cukup banyak. Hal tersebut banyak menyebabkan para developer web menggunakannya dalam pembuatan sebuah website. JQuery memiliki slogan “Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. Degan istilah kata lain bisa disebutkan, kecil-kecil cabe rawit.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
JQuery merupakan library open source dengan lisensi GNU General Public License dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang menginginkan fungsi lebih, JQuery memungkinkan penambahan fungsionalitas dalam bentuk plugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara gratis di internet.

Apa yang bisa Anda Lakukan dengan JQuery?

1. Mengakses bagian halaman tertentu dengan mudah.
Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.
2. Mengubah tampilan bagian halaman tertentu.
CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web. Namun terkadang CSS punya kelemahan yang cukup mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua browser. Cukup merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus. Sekali lagi JQuery menawarkan solusi untuk mengatasi hal tersebut. Dengan JQuery, “kesenjangan” yang terjadi antara browser dalam urusan CSS akan tertutup dengan baik.
3. Mengubah isi dari halaman.
Jaman dulu (baca:sebelum JQuery lahir) cukup sulit jika kita akan mengubah sebagian isi dari halaman. Mengubah disini dapat berarti mengganti teks, menambahkan teks atau gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa baris perintah.
4. Merespon interaksi user dalam halaman.
Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa event-handling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah.
5. Menambahkan animasi ke halaman.
Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya. Saat ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya. Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing. JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.
6. Mengambil informasi dari server tanpa me-refresh seluruh halaman.
Mengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX, saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya.
7. Menyederhanakan penulisan Javascript biasa.
Semboyan JQuery adalah “Write less, do more” atau dengan kata lain kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery.

Download JQuery

Situs resmi JQuery dapat diakses di http://jquery.com/. Dan library JQuery dapat didownload di alamat http://docs.jquery.com/Downloading_jQuery. Tersedia library jQuery dalam 2 (dua) jenis yaitu minifieddan uncompressed. Minified jika kita ingin menggunakannya saja dalam website kita (ukuran 18 KB), sedangkan uncompressed jika kita berkeinginan turut serta mengembangkan code jQuery.

Contoh Sederhana JQuery

Contoh sederhana penggunaan JQuery
Contoh sederhana penggunaan JQuery
Penjelasan Program
1. Pertama, kita harus menyertakan (include) file library JQuery. Pastikan letak dari file library sudah benar. 2. Perintah-perintah JQuery.
  • Baris 8 merupakan perintah inisialisasi dimana saat halaman (dokumen) siap ditampilkan maka jalankan juga perintah yang ada di dalamnya. Hal ini mirip dengan event onLoad yang biasanya diletakkan di tag <body>.
  • Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi saat link dengan class=show ( $(‘a.show’) ) diklik (lihat link baris ke-22). Jadi jika link di-klik maka paragraf dengan nama class=jquery ( $(‘p.jquery’) ) akan tampil dengan durasi tampil “slow”. Paragraf yang akan ditampilkan adalah paragraf baris ke-24 sampai 27.
  • Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf yang mengandung nama class=jquery.
3. Isi dari halaman. Perhatikan nama class dari masing-masing object.

Sekian Tutorial Dasar Jquery nya, saya harap dapat berguna bagi setiap yang membacanya.

Tutorial CSS/HTML : Cara Membuat Menu Horizontal Cantik Dengan HTML dan CSS

Selamat Malam buat sahabat sekalian, saya ingin membagikan kepada anda sebuah tutorial HTML\CSS yang tidak kalah menariknya dari postingan saya yang lain . Tutorial kali ini adalah Cara Membuat Menu Navigasi Lengkap dengan Drop Down murni dengan CSS.
Baiklah sebelumnya, saya sebagai admin mengasumsikan bahwa Anda sudah paham HTML dan CSS, dan tentu saja sudah paham menghubungkan antara HTML file dengan CSS, kalau belum saya sarankan lihat postingan saya sebelum postingan ini.
Sebelum anda meneruskan membaca tutorial ini, saya sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu.

1. Membuat kode HTML

Baik , mari kita mulai dengan kode HTML nya, serhubung sekarang jamannya HTML5 maka kita akan pakai HTML5, tenang aja masih saya campur-campur dengan XHTML, nanti mengenai HTML5 akan saya bahas sendiri dilain waktu. Oke untuk strukturnya masih sama kita menggunakan tag <ul> dan <li>.
Berikut kodenya HTML nya .

Sekarang buat sebuah halaman dengan nama "Header.HTML" , lalu copy-kan seluruh code HTML ini kedalamnya .

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Drop Down Menu ala Kumpulan Tutorial Website </title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<head>
<body>
  <div id="place-nav">
  <ul id="nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Artikel</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Social</a>
      <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Google</a>
          <ul>
          <li><a href="#">Google Wave</a></li>
          <li><a href="#">Google Buzz</a></li>
          <li><a href="#">Google Plus</a></li>
          </ul>
        </li>
        <li><a href="#">Twitter</a></li>
      </ul>
    </li>
    <li><a href="#">Portfolio</a></li>
  </ul>
  </div>
</body>
</html>

Berikut sedikit penjelasan tentang kode diatas :

Jika kita perhatikan didalam <li> Social ada menu lagi dan didalamnya lagi tepatnya didalam <li> Google ada menu lagi. Ini kita nanti akan membuat drop down menu dengan 2 level kedalaman.

Nah sekarang langkah selanjutnya, kita ubah list yang biasa itu menjadi menu yang menarik dengan CSS. Seperti ini kode CSS nya, langsung saya tulis semua nanti baru saya terangin:
Buat sebuah halaman dengan nama "Style.CSS" , lalu copy-kan seluruh kode CSS dibawah ini kedalamnya. .
#place-nav {
  width:960px;
  height:35px;
  margin:63px 0 0 0;
}
#nav {
  height:35px;
}
#nav li {
  height:35px;
  float:left;
  display:inline;
  margin:0 5px;
  position:relative;
  font-family: Arial, verdana, serif;
  z-index:1000;
}
#nav li a {
  float:left;
  display:inline;
  height:25px;
  padding:10px 8px 0 8px;
  font-size:12px;
  color:#9e9e9e;
  font-weight:bold;
  text-transform:uppercase;
  text-shadow:0 0 3px #c7c7c7;
}
#nav li:hover a {
  text-decoration:none;
  color:#505050;
}
#place-nav ul ul {
  position:absolute;
  z-index:1200;
  display:none;
  width:186px;
  margin: 0;
  top: 35px;
  left:0;
  background:#1d87ca;
  padding:0 0 2px 0;
}
#place-nav ul li ul li {
  display: inline;
  float: left;
  width:186px;
  height:auto;
  border-bottom:1px solid #085d93;
  float: left;
  padding: 0;
  position:relative;
  margin:0;
}
#place-nav ul ul ul {
  position:absolute;
  z-index:1300;
  display:none;
  width:186px;
  margin: 0;
  top: 0;
  left:183px;
  background:#1c83ce;
  border-left:1px solid #1479c3;
  padding:0;
}
#place-nav ul li ul li ul li {
  display: inline;
  float: left;
  padding: 0;
}
#place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited {
  color:#fff;
  font-size:12px;
  width:170px;
  height:auto;
  text-transform:none;
  border:none;
  background: none;
  padding:9px 8px;
  text-shadow:none;
  margin:0;
  font-weight:lighter;
}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover {
  text-decoration:none;
  color:#fff;
  background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;} div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}


Jika sudah , sekarang coba anda jalankan pada browser file Header.HTML tadi , lalu lihat hasilnya.
So, sekarang saya akan terangkan bagian-bagian yang terpenting, pertama adalah #nav li disini kita kasih position:relative;, kenapa? karena drop down kita #place-nav ul ul memilki position:absolute;. Sehingga kita harus mendeklarasikan kontainernya agar posisinya pas dibawah tiap menu <li>. Jika kita tidak memberi position:relative; maka browser akan menganggap kontainer nya adalah <body> sehingga drop downnya akan muncul dipojok kiri atas browser.

Berikutnya adalah #nav li:hover a loh kok bukan #nav a:hover li kenapa <li> nya yang dihover? Yap, karena drop down kita berada didalam <li> dan bukan didalam <a> maka apabila kita ingin jejaknya tetap ada ya kita hover di <li> nya. Saya tambahkan z-index:1000 buat jaga-jaga karena biasanya dibawah menu itu biasanya terdapat slideshow javascript dan kebanyakan kasus terutama IE7 posisi dropdown dibawah slideshow, karena itu saya kasih z-index yang agak tinggi biar posisi diatasnya.
Dan karena IE6 hanya kenal hover untuk tag <a> maka kalau anda masih cinta IE6 dan masih ingin mendukungnya mending ke laut aja maka gunakan csshover.htc Peter Nederlof agar bisa jalan di IE6/ .

Oke berikutnya #place-nav ul ul nah ini merupakan drop downnya, karena itu kita beri position:absolute; agar muncul tepat dibawah tiap #nav a:hover li. Jangan lupa untuk kita hilangkan dulu, karena drop downnya baru muncul kalau kita hover jadi awalnya disembunyiin dulu dengan display:none;. Kita atur posisinya agar tepat dibawah menu dengan top:35px; dan left:0;. Pastikan untuk jarak atasnya tidak ada ruang kosong 1 pixel pun karena jika ada ketika mouse kita melewati ruang kosong tersebut maka mouse kita sudah diluar <li> sehingga dropdown akan langsung hilang. Jadi pastikan nilai top lebih kecil atau sama dengan nilai height <li> diatasnya.

Berikutnya #place-nav ul ul ul ini merupakan drop down level ke 2 jadi ya sama kayak sebelumnya, tapi karena dorp down level kedua posisinya agak kekanan dari drop down level 1, maka nilai left kita perbesar tapi juga jangan ada jarak 1 pixel pun.


Nah yang terakhir dan terpenting adalah :


div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}

Ini merupakan kode css untuk memunculkan drop down dan menghilangkannya. Seperti yang Anda lihat div#place-nav li:hover ul, div#place-nav li li:hover ul ini berarti jika kita menghover <li> maka <ul> berikutnya akan muncul display:block dan <ul> dalamnya (level ke 2) tidak muncul display:none;  baru ketika kita hover <li> level ke dua maka drop down level ke dua akan muncul.
Selamat mencoba, dan jangan lupa share dan komennya yah.
Terimakasih.

Jenis - Jenis Bahasa Pemrograman Web

Berikut ini adalah jenis-jenis bahasa pemrograman web
1. Bahasa Pemrograman HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet.
HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.
Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer.
2. Bahasa Pemrograman PHP

PHP adalah bahasa pemrograman script yang paling banyak dipakai saat ini.
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web.
PHP banyak dipakai untuk membuat situs web yang dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain.
PHP biasanya berjalan pada sistem operasi linux (PHP juga bisa dijalankan dengan hosting windows).
3. Bahasa Pemrograman ASP

ASP adalah singkatan dari Active Server Pages yang merupakan salah satu bahasa pemograman web untuk menciptakan halaman web yang dinamis.
ASP merupakan salah satu produk teknologi yang disediakan oleh Microsoft.
ASP bekerja pada web server dan merupakan server side scripting


4. Bahasa Pemrograman XML

Extensible Markup Language (XML) adalah bahasa markup serbaguna yang direkomendasikan W3C untuk mendeskripsikan berbagai macam data.
XML menggunakan markup tags seperti halnya HTML namun penggunaannya tidak terbatas pada tampilan halaman web saja.
XML merupakan suatu metode dalam membuat penanda/markup pada sebuah dokumen.



5. Bahasa Pemrograman WML

WML adalah kepanjangan dari Wireless Markup Language, yaitu bahasa pemrograman yang digunakan dalam aplikasi berbasis XML (eXtensible Markup Langauge).
WML ini adalah bahasa pemrograman yang digunakan dalam aplikasi wireless.
WML merupakan analogi dari HTML yang berjalan pada protocol nirkabel
6. Bahasa Pemrograman PERL

Perl adalah bahasa pemrograman untuk mesin dengan sistem operasi Unix (SunOS, Linux, BSD, HP-UX), juga tersedia untuk sistem operasi seperti DOS, Windows, PowerPC, BeOS, VMS, EBCDIC, dan PocketPC.
PERL merupakan bahasa pemograman yang mirip bahasa pemograman C.
7. Bahasa Pemrograman CFM
Cfm dibuat menggunakan tag ColdFusion dengan software Adobe ColdFusion / BlueDragon / Coldfusion Studio.
Syntax coldfusion berbasis html.
8. Bahasa Pemrograman Javascript

Javascript adalah bahasa scripting yang handal yang berjalan pada sisi client.
JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape.
Untuk menjalankan script yang ditulis dengan JavaScript kita membutuhkan JavaScript-enabled browser yaitu browser yang mampu menjalankan JavaScript.




9. Bahasa Pemrograman CSS
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup.
Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML.
Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL.
Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
Itulah macam-macam pemrograman web populer dan ini ciebal 100% COPAS dari website orang dan semoga memberikan manfat.
10. Asynchronous JavaScript And XML(AJAX)

Ajax adalah bahasa pemrograman yang membuat web kita lebih interaktif yang salah satu contoh web yang banyak menggunakan ajax adalah facebook, dengan menggunakan ajax web kita terlihat lebih dinamis karena tidak semua page yang tereload

Model Premrograman Web

Pengertian Client Side Dan Server Side

Server Side merupakan teknologi webpage yang menerapkan jenis pemrograman web dimana semua sintaks dan perintah program yang diberikan akan dijalankan/diproses di web server, kemudian hasilnya dikirimkan ke browser pengguna dalam bentuk HTML biasa. Sehingga pengguna tidak dapat melihat kode asli yang ditulis dalam bentuk server side programming seperti; CGI/Perl Active Server Page, PHP, Cold Fussion dan lain-lain. Contoh lain dari teknologi webpage yang bersifat server side adalah mesin pencari(search engine).
Server Side bertolak belakang dengan Clien Side, semua program yang diminta oleh browser akan dieksekusi dari server tersebut, pengunjung hanya mendapat informasi dari hasil olahannya, sistem ini lebih aman daripada Clien Side. Contoh:PHP,ASP,ASP dot net,Java Server Net,Java Server Page,dll.
Client Side merupakan teknologi webpage yang menerapkan jenis pemrograman web dimana semua sintaks dan perintah program dijalankan di web browser sehingga ketika client meminta dokumen yang mengandung script, script tersebut akan diambil dari web server kemudian dijalankan di web briwser yang bersangkutan. Contoh dari Client Side Programming seperti : Java Script, VbScript, HTML.

Perbedaan utama server-side dan client server
Perbedaan utama server-side programming dan client server programming adalah tempat mengeksekusi skripnya. Pada client server programming, skrip dieksekusi di browser sedangkan server side programming dieksekusi di client (web browser)

  • CLIENT SIDE
Karakteristik client side scripting :
1. Kode program didownload bersama dengan halaman web
2. Bersifat interpreter dan diterjemahkan oleh browser
3. Model eksekusinya simple dan skrip dapat dijadikan satu dengan HTML
Berikut cara kerja Client Side:
Pengunjung web mengklik salah satu link dari web dan browser membaca perintah pengunjung untuk memangil alamat web yang dituju.
Setelah itu browser akan mengalihkan ke halaman yang dituju oleh pengunjung web.
Contoh aplikasi Client Side :
  • Css
  • Jquery
  • Javascript,dll
Kelebihan dan kekurangan dari client side programming adalah :
Kelebihan Client-Side-Scripting
1. Tidak perlu server khusus untuk menjalankannya
2. Eksekusi script lebih cepat
3. Tidak membebani kinerja web server.

Kekurangan Client-Side-Scripting
1. Harus di support oleh browser dari pihak client
2. Script dapat ditiru
3. Dari segi keamanan kurang dapat diandalkan

  • SERVER SIDE
Karakteristik server side programming :
1. Ada client yang meminta request
2. Eksekusi program dilakukan di server
3. Mengirimkan hasil ke client
Cara kerja Server side :
jika kita melakukan interaksi dengan halaman web maka browser akan mengirimkan perintah ke server,  kemudian server akan merespon dan melaukan perintah yang diberi kemudian server akan mengirimkan kembali data/ perintah dari  browser, dan browser akan menampilkan data/ perintah tersebut.

Keuntungan server side programming :
Cross platform : tidak tergantung dengan browser tertentu
1. Optimasi danpemeliharaan dilakukan di browser
2. Dapat mengakses database dan tidak tergantung dengan keamanan
3. Menambah kekuatan server
4. Kode program aman

Aplikasi yang sering digunakan oleh server side programming
1. Search engines
2. Database access
3. Chat & bulletin board service
Dalam pembuatan web teknologi server side dibutuhkan server seperti xampp, wam, iis dan lain sebagainya. Contoh teknologi server side :
Asp
Php
Jsp
Phyton,dll
Kelebihan dan kekurangan dari Server side programmingadalah :
Kelebihan Server-Side-Scripting
1. data lebih aman
2. Susah untuk ditiru karena script di jalankan di server
3. Dari segi keamanan lebih menjamin dibandingkan dengan Client-Side-Scripting
Kekurangan Server-Side-Scripting
1. Memerlukan Server khusus untuk menjalankannya
2. Menambah beban kerja server
3. Agak lambat jika dibandingkan dengan Client-Side-Scripting karena script di terjemahkan di server kemudian tampilan di load di client

ARSITEKTUR CLIENT SIDE DAN SERVER SIDE

Arsitektur merupakan sekumpulan dari sistem sirkuit, chip, bus untuk ekspansi slot, BIOS dan lain sebagainya. Dalam arsikektur terdapat tiga elemen utama yaitu :
  • Arsitektur sistem pemrosesan, yaitu suatu standart teknis untuk menentukkan hardware, lingkungan sistem operasi, dan software aplikasi.
  • Arsitektur telekomunikasi dan jaringan, digunakan untuk menentukan fasilitas dalam komunikasi perusahaan, yang dilalui oleh informasi.
  • Arsitektur data yaitu berfungsi untuk menentukan organisasi data untuk tujuan referensi silang dan penyesuaian ulang, serta untuk penciptaan sumber informasi yang dapat diakses oleh aplikasi bisnis dalam lingkup luas.
Dalam Arsitektur Telematika terdiri atas dua Arsitektur yaitu :
1. Arsitektur Server Side
Server atau sering disebut juga back-end akan menerima pesan dari client, yang diproses dan hasilnya akan dikembalikan kepada client. Contoh dari tugas server melayani permintaan client kemudian memberikan jawaban atas data yang diminta oleh client, server dapat juga berkolaborasi dengan server lain untuk melayani permintaan client.
2. Arsitektur Client Side
Front-end atau client akan menerima hasil pemrosesan data yang dilakukan oleh server kemudian ditampilkan kepada user pada sebuah aplikasi yang dapat berinteraksi langsung dengan user. Client akan bekerja setelah mendapat instruksi dari server kemudian data akan diproses oleh server yang kemudian akan diberikan kepada client. Client berinteraksi langsung dengan user menggunakan user interface seperti Graphical User Interface (GUI).
Berikut ini beberapa contoh penanganan pada client yang berhubungan dengan DBMS yaitu:
  • Presentation Logic
Dalam Presentation Logic bertanggung jawab dalam memformat data pada pengguna atau alat keluaran dan bertugas mengendalikan masukan pengguna dari keybord atau alat input lainnya.
  • Processing Logic
Processing logic digunakan untuk penanganan logika pada saat data diproses, logika aturan bisnis (business rule logic), dan logika manajemen data (data management logic). Untuk mengetahui kesalahan proses pada data digunakan proses data logic.
  • Storage Logic
Bertanggung jawab pada hal penyimpanan data dan perbaikan data dari alat penyimpan yang bekerja dengan aplikasi.

Beberapa Permodelan Arsitektur Client server :
  • Arsitektur Mainframe
Menyediakan waktu dan sebagian memorinya untuk pemakai, kemudian berpindah kepemakai lain dan kembali lagi kepemakai awal. Komputer jenis ini memiliki suatu Central Processing Unit, Storage Device yang agak besar .
  • Arsitektur File Sharing
Didalam media penyimpanan server terdapat file-file yang dapat diakses langsung oleh user namun arsitektur ini memiliki keterbatasan dalam proses sharing.

  • Arsitektur Client/Server
Proses pengiriman pada query data ke server dapat dilayani dengan cepat karena data yang dikirim adalah hasil dari query tersebut. RPC (Remote Procedure Calls) memegang peranan penting dalam arsitektur client sever. Terdapat dua model client server yaitu Two-tier dan Three-tier.
Model Two-tier
Pada Arsitektur Two-tier, antarmukanya terdapat pada lingkungan desktop dan sistem manajemen database biasanya ada pada server yang lebih kuat yang menyediakan layanan pada banyak client. Pengolahan informasi dibagi antara lingkungan antarmuka sistem dan lingkungan server manajemen database.
Model Three-tier
Arsitektur Three-Tier diperkenalkan untuk mengatasi kelemahan dari arsitektur two-tier. Di tiga tingkatan arsitektur, sebuah middleware digunakan antara sistem user interface lingkungan client dan server manajemen database lingkungan. Middleware ini diimplementasikan dalam berbagai cara seperti pengolahan transaksi monitor, pesan server atau aplikasi server. Middleware menjalankan fungsi dari antrian, eksekusi aplikasi dan database staging