[Newbie Responsive WebDesign Tuts] View Port For Responsive Design.

Beberapa orang yang baru belajar web design apalagi responsive web design biasanya hanya mementingkan @media maxwidth/min width pada CSS mereka.
Tapi ada tags pada html yang harus di gunakan ketika kita membuat sebuah responsive design.
Disini saya akan menjelaskan tags itu khusus para newbie web design.

Tags apa sih yang mempengaruhi responsive design? Tags pada html ini biasanya kita lihat jika kita membuka source code responsive web design milik orang lain :

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

Bisa dikatakan tanpa tags ini sebuah design yang responsive tidak akan berfungsi walau kita sudah mencobanya di komputer browser dan berfungsi,tapi ketika kita lihat langsung browser handphone tidak akan berfungsi tanpa tags diatas.

Mungkin teman-teman sekalian akan melihat contohnya jika tanpa tags diatas akan menjadi seperti berikut :

Gambar diatas menjadi contoh responsive design tanpa viewport.Kenapa viewport width = 1024?

Sebenarnya kita bisa langsung menggunakan width=device-width agar langsung merespon berapa pun width atau ukuran layar dari perangkat yang kita gunakan. Diatas hanya contoh perangkat yang memiliki ukuran layar 1024 ya.

Oke sekian tulisan kali ini.Tulisan ini ber-Ide dari : http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

Salam :)

Read More

Share : Sedikit cara mengamankan Login Sistem.

Oke teman-teman selamat malam.Masih dalam susasana ramadhan.Sambil menunggu sahur.Kebetulan juga lagi bosen dan laper,hhe mending sharing sesuatu.
Waktu menunjukan pukul 1.30Am. Huamm.
Disini saya akan memberikan cara membuat login dan mengamankannya.
Terkadang banyak orang yang lalai juga membuat login yang penting ada passwordnya dan ter-encrypt pasti aman.

Dengan banyaknya mesin decrypt online.Semua sudah gampang.Hanya bagaimana cara masuk kedalam sistem database dan mencuri passwordnya.

Oke kita sekarang membuat loginnya dulu ya.
Nah buat dulu deh form nya pakai dreamweaver atau lainnya.
Seperti ini atau lebih simple juga gak apa.

Dan action formnya : action"cek.php"

Nah sekarang kita buat cek.php nya.

Berikut adalah isi dari cek.php

<?php
include"../koneksi.php";
function antiinjection($data){
$filter = mysql_real_escape_string(stripcslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES))));
return $filter;
}
$username = antiinjection(mysql_real_escape_string($_POST['username']));
$password = antiinjection(mysql_real_escape_string($_POST['password']));
$text = 'adminganteng';
$pass = md5($password.$text);
$login = mysql_query("Select * from admin where username='$username' and password='$pass' and level='master'");
$T = mysql_num_rows($login);
$R = mysql_fetch_array($login);
if($T==1){
session_start();
$_SESSION[id] = $R[id];
$_SESSION[username] = $R[username];
$_SESSION[password] = $R[password];
$_SESSION[nama] = $R[nama];
$_SESSION[level] = $R[level];
header('location: administrator.php');
}
else {
echo "<script lang=javascript>;window.alert('Username Password Salah');window.location.href='index.php';</script>";
}
?>

Oke diatas saya menggunakan banyak fungsi untuk menolak adanya tanda mencurigakan yang memungkin hacker bisa masuk kedalam database kita.

Kenapa ada tulisan "adminganteng" ? :p
Itu adalah kata yang saya acak untuk membuat enkripsi baru agar password kita bersatu dan terenkripsi oleh kata tersebut.
Jadi seperti ini $password.$text
$password = admin
$text = adminganteng
enkripsi baru : md5(adminadminganteng).

Oke cukup sekian kebetulan saya sudah ngantuk dan ingin tidur sebentar hhe.
Terima kasih

Read More

Pengenalan KendoUI

Buat temen-temen yang menyukai khususnya Plugin jquery bundled,Harus cobain yang namanya KendoUI.
Apa itu kendoUI? KendoUI adalah semacam framework jquery javascript dan Html5.
Mereka menyediakan banyak plugin/widget berbasis web atau interface pemrograman lainnya.
Mereka juga menyediakan plugin gratis hanya untuk website.Untuk mobile dan desktop mereka memberikan harga.
Saya sendiri suka menggunakan plugin yang mereka berikan karena didukung dengan Jquery,Css3 Dan Html5.Mereka menyediakan tema untuk setiap widget mereka yang membuat widget mereka terpasang dengan baik tanpa perlu tambahan atau editan desain.

http://www.kendoui.com/

Yang tak kalah menarik KendoUI juga menyediakan plugin yang bisa digunakan untuk perangkat mobile seperti android,Iphone atau Ios yang membuat program yang dijalan kan oleh si pengguna terasa lebih hidup dan interaktif.
Mungkin akan terasa kece kalau kalian menggunakan widget/plugin yang mereka sediakan hhe.
Buat belajar,KendoUI memberikan folder Example dengan berisi kegunaan dan fungsi dari KendoUI.

Oke cukup dengan pengenalannya.Sekarang saya akan memberikan sedikit contoh widget yang di berikan KendoUI.
Ini adalah widget datetimepicker.

	<!DOCTYPE html>
	<html>
	<head>
	<link href="examples/content/shared/styles/examples-offline.css" rel="stylesheet"/>
	<!--Base CSS styles and primitives-->
	<link href="styles/kendo.common.min.css" rel="stylesheet"/>
	<!--Theme specific styles-->
	<link href="styles/kendo.default.min.css" rel="stylesheet"/>
	</head>
	<script src="js/jquery.min.js"></script>
	<script src="js/kendo.web.min.js"></script>
	<script src="examples/content/shared/js/console.js"></script>
	<script type="text/javascript">
	$(function() {
	$("#waktu").kendoTimePicker();
	$("#tanggal").kendoDatePicker();
	});
	</script>
	<body>
	<div id="example" class="k-content">
	Jam : <input id="waktu" />
	</div>
	</body>
	</html>

Dan hasilnya akan seperti ini.Untuk memunculkan hasil seperti dibawah kalian download dulu deh KendoUI nya :p

Masih banyak lagi deh.Download dulu disini http://www.kendoui.com/

Setelah di download.Extract kendoUI nya ke htdocs lalu buka http://localhost/namafolderkendoUI/examples/

Oke cukup sekian posting kali ini.

Terimakasih atas perhatiannya.

Read More

Membuat Template Responsive Dengan Css Dan Html

Nah teman-teman sekarang saya mau sharing bagaimana caranya membuat sebuah website agar responsive.
Pasti keren website teman sekalian bisa dibuka dimana saja dan kapan saja.Nah oleh karena itu penting juga nih buat baca tutorial kali ini.
Responsive template artinya menyesuaikan keadaan monitor atau layar.
Sudah tidak asing lagi responsive template bagi para web designer advanced atau pun beginer.
Disini kita gak langsung bikin dengan gambar seperti background atau gambar lainnya :p ,biar bisa cepat dimengerti saja ya.
Oke wait,Ane upload dulu gambar desain contohnya.
1Menit kemudian.

Diatas adalah contoh dari layout yang saya bikin.Ini berbentuk full untuk desktop komputer/laptop.
Nah ini adalah Cssnya.

<style type="text/css"> 

#layout { width: 100%;}#layout .konten { margin: auto; width: 900px; background-color: #CCCCCC;}#layout .konten .header { float: left; width: 100%; height: 100px; background-color: #99CC00;}#layout .konten .menu { float: left; width: 100%; background-color: #99CCCC;}#layout .konten .body { float: left; width: 600px; background-color: #00CCFF; height: 400px; text-align: center;}#layout .konten .footer { padding: 1px; clear: both; width: 99%;}#layout .konten .side { background-color: #FF0000; float: left; height: 200px; width: 300px;} 

</style>

Script css diselipkan di antar <head></head>
Dan ini adalah bagian Htmlnya

<div id="layout">
  <div class="konten">
    <div class="header"><h1>Logo</h1></div>
    <div class="menu">Menu</div>
    <p>&nbsp;</p>
    <div class="body">Konten Website</div>
    <div class="side">Side Bar</div>
    <p>&nbsp;</p>
    <div class="footer"></div>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

Maka akan menjadi tampilah seperti di gambar.
Jika anda menggunakan mozilla firefox.Klik Tools > Web Developers > Responsive Design View.
Maka anda tidak akan mendapati tampilan handphonenya.
Bagaimana untuk menjadikannya Responsive seperti ini?

Jawabannya adalah dengan menggunakan script css ini.

@media screen and (max-width: 980px) {#layout { width: 100%;}#layout .konten { margin: auto; width: 95%; background-color: #CCCCCC;}#layout .konten .header { float: left; width: 100%; height: 100px; background-color: #99CC00;}#layout .konten .menu { float: left; width: 100%; background-color: #99CCCC;}#layout .konten .body { float: left; width: 100%; background-color: #00CCFF; height: 400px;}#layout .konten .footer { padding: 1px; clear: both; width: 99%;}#layout .konten .side { background-color: #FF0000; float: left; height: 200px; width: 100%;}}

Script diatas digabungkan dengan script yang sudah teman sekalian selipkan.
Letakan script diatas sebelum </style> atau dibagian paling Bawah.
Lalu test di mozilla teman-teman apakah sudah responsive atau belum dengan menggunakan cara sebelumnya.

Jangan Lupa Sebelum </head> Berikan Code Ini Agar Work Di Segala Device Ya.

<meta name="viewport" content="width=device-width">

Oke sekian dari saya.
Terima kasih atas perhatiannya.

Read More

Upload File/Foto Dengan PHP-Mysql

Oke teman-teman mumpung lagi gak mood buat ngerjain projekan,sekarang saatnya untuk nulis sebentar.
Sekedar berbagi coding php dasar aja,yaitu membuat upload file atau foto dengan php mysql.
Buat tulisan kali ini,saya hanya akan memberikan coding upload file/foto.Nah untuk post selanjutnya saya akan berbegi coding bagaimana menampilkan nya dengan data lain seperti berita/komentar dll agar posting saya sedikit panjang dan ber-episode hhe.

Oke langsung saya.Nyalakan Xampp/Webserver local.Karena kita disini menggunakan localhost ya bukan ke hostingnya langsung!
Jika sudah sekarang Buka notepad++/Dreamweaver atau lainnya lah yang penting coding jadi.
Yang pertama kali harus dilakukan adalah membuat koneksi ke database.Ingat itu penting.Hhhee.
Saya kasih bentuk gambar aja ya :p
Disini saya pake Sublime Text 2.Buat temen-temen coder silahkan download untuk kemudahan codingnya.Link cari sendiri.Hha.

Koneksi Php Ke Database. KONEKSI.phpKlik Untuk Memperbesar Gambar

Gambar table upload foto.Klik Untuk Memperbesar Gambar

Oke diatas adalah codingnya.Database nya disini dengan nama database yang kalian buat sendiri ya.

Sekarang Kita masuk yang agak sulit.

Teman-teman buat dulu folder "GAMBAR" dimana folder ini akan menjadi tempat singgah gambar/file yang kalian upload.

Disini kita membuat index.php nya dulu.

Isi dari index.php adalah.

Coding untuk input gambar ke folder dan database. INDEX.php
Klik Untuk Memperbesar Gambar

Diatas telah ane kasih script yang lebih kompleks dimana kita tidak usah lagi membuat Index.php dan aksi_upload.php

Berikut adalah keterangan coding diatas.

• error_reporting(0); ->Biasanya jika kita menggunakan suatu script switch case atau if else untuk membuat suatu halaman.Dia akan membaca error tetap ini adalah hal yang wajar maka saya meletakan diatasnya error_reporting untuk menyembunyikan pesan error yang akan keluar.
• Switch case disini berfungsi untuk memisahkan suatu koding atau membuat halaman.Seperti contoh diatas.Saya membuat switch case dengan isi Default dan upload.
  
  Dimana default adalah : pilihan pertama yang akan muncul jika kita mengeksekusi index.php,maka saya meletakan Html form agar yang keluar ketika mengetik index.php adalah form upload.
  
  Dan case 'upload' adalah: fungsi untuk membuat halaman index.php?act=upload.
  
  Switch($_GET['act']) adalah fungsi untuk memanggil case nya.Misal index.php?act=upload.
  teman-teman bisa mengganti jadi pages/page atau lainnya.
• $a = date adalah untuk membuat tanggal.
• $lokasi adalah nama lokasi untuk mengupload file kalian.
• $dir adalah gabungan dari $lokasi dan $gambar_nama <- dimana $gambar_nama = $_FILES['gambar']['name'] <= script untuk mengambil nama file yang diupload.
• $namafile adalah gabungan dari $a.$gambar_nama <- $gambar_nama harus di belakang tidak boleh di depan.
• $move = move_uploaded_files adalah script untuk memindahkan/copy gambar dari komputer ke direktori server.
• rename adalah script untuk mengubah nama.Disini kita gunakan untuk mengubah nama asli gambar menjadi $a = tanggal dan detik ditambah $gambar_nama = nama gambar.
• Insert into upload adalah memasukan nama gambar ke dalam database.

Oke diatas sedikit penjelasan tentang script yang ane upload berupa gambar.
Untuk lebih jelas silahkan di eksekusi.

Atau masih bingung silahkan kirim komentar teman sekalian.

Terimakasih atas perhatiannya :)

Read More

Kenalan Dulu..

Hello nama gue paysal.
Hehe sory gak formal ya bahasanya.Gue bukan orang yang suka terlalu formal kecuali lagi hadapan sama client :p .
Oh iya,Di blog ini mungkin gue akan berbagi tutorial membuat aplikasi web php atau pun tutorial desain web.
Untuk para beginner juga silahkan bertanya langsung.Kalau gak dibalas pertanyaannya bisa post aja langsun di twitter gue :p hhe.
Gue ini tinggal di depok,Orang Jawa - Makasar.tapi gak ada muka makasar dan jawa.Menurut gue :p .
Blog ini hanya sekedar pengisi waktu luang dan tempat sharing aja hasil dari experimen-experimen gue.
Nah silahkan deh teman-teman membaca dan semoga sesuatu yang gue share disini bermanfaat buat kalian ya :) hhe.

Salam.

Read More