Search Box

Custom Search

Tuesday, September 8, 2015

cara melihat view source pada hp

Posted by Unknown  
Tagged as: , ,
1:55 PM

Seperti yang mungkin sudah anda ketahui bahwa source code dari sebuah website adalah kode HTML mentah yang di interpretasikan oleh browser sehingga yang kita bisa melihat bentuk layout yang indah, rapih, dengan penempatan gambar serta pengaturan tulisan yang enak untuk dipandang mata.
Terkadang kita ingin melihat source code dari website tersebut, alasannya ada banyak kenapaseseorang ingin melihat kode, bagi developer website itu sendiri mungkin untuk memastikan kodenya sudah benar atau belum, masalah keamanan, dan lain sebagainya.

View Source Di Desktop

Kita bias melihat source code di browser computer dengan melakukan:
Right Click -> View Source
Maka semua kode HTML penyusun website tersebut bisa kita lihat.

View Source di Handphone

Namun agak sulit ketika kita ingin melihat source code jika kita membuka website dari handphone(HP), di handphone tidak mengenal istilah Right Click (Klik Kanan), biasanya yang ada hanya Touch.
Lalu bagaiman melihat source code sebuah website dari handphone? Caranya simple saja cukup tulis di Address Bar seperti berikut ini:
Maka source code akan muncul di layer handphone anda. Cara tersebut bisa digunakan hampir disemua browser Android.
Untuk opera mini caranya, buka terlebih dahulu website yang ingin dilihat misal jurnalweb.com, setelah website terbuka di address bar ketik:
Server:source
Selamat mencoba...

Tutorial Membuat Desain Web Responsive

Posted by Unknown  
Tagged as: ,
1:34 PM

Tutorial cara membuat desain web responsive — Pada tulisan kali ini secara singkat bagaimana cara membuat layout website yang responsive yaitu layout yang bisa menyesuaikan tampilannya meskipun dibuka di berbagai ukuran layar (ponsel, tablet maupun pc).
Kita akan mencoba membuat layout web responsive, dimulai dengan layout 3 kolom, lalu ketika dibuka di ukuran tertentu (1080px) maka akan menjadi 2 kolom, dan selanjutnya pada layar 780px kebawah akan menjadi 1 kolom.
Anda bisa perhatikan perubahannya pada gambar dibawah ini:
responsive web design

Pertama Buat Script HTML

Pertama kita akan mulai dengan membuat struktur HTML nya, terdiri dari 3class utama, dan karena kita akan membuat 3 kolom maka pada class.main akan kita bagi menjadi 3 class yaitu .left.middle dan .right, setiap class nanti diberi ukuran tertentu dan diberi properti float agar membentuk kolom.
  1. class header
  2. class main ( terdiri dari class “.left”, “.middle” dan “.right”
  3. class footer
<div class="container">
 <div class="header">Untuk bagian header...</div>
 <div class="main">
  <div class="left">Untuk kolom bagian Kiri...</div>
  <div class="middle">Untuk kolom bagian tengah...</div>
  <div class="right">Untuk kolom bagian kanan...</div>
 </div>
 <div class="footer">Untuk bagian footer...</div>
</div>
Untuk bagian head dari HTML jangan lupa di beri tag meta viewport, tag nya seperti ini:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sisipkan meta viewport didalam tag head

Mengatur Layout Dengan CSS

Struktur HTML telah selesai kita buat, namun layout nya belum terbentuk. Maka selanjutnya kita beri tambahan kode CSS agar membentuk layout yang terdiri dari 3 kolom, potongan kode css nya seperti berikut ini.
.container{
 max-width: 1080px;
 margin: 20px auto;
 background: #fff;
 overflow: hidden;
 padding: 10px;
}

.header{
 border: 1px solid #dedede;
 padding: 10px;
 margin: 10px;
}

/* Main */
 .left{
  width: 250px;
  border: 1px solid #dedede;
  background: #e5e5e5;
  padding: 10px;
  margin: 10px;
  float: left;
 }

 .middle{
  width: 500px;
  border: 1px solid #dedede;
  padding: 10px;
  margin: 10px;
  float: left;
 }
  .middle img{
   max-width: 100%;
   height: auto;
  }

 .right{
  width: 250px;
  border: 1px solid #dedede;
  padding: 10px;
  margin: 10px;
  float: left;
 }

.footer{
 clear: both;
 border: 1px solid #dedede;
 padding: 10px;
 margin: 10px;
}

Mengatur Gambar Agar Menyesuaikan Layout

Gambar biasanya menjadi masalah jika ukuran nya lebih lebar dibanding layout, oleh karena itu kita harus tentukan script untuk gambar ini, kita buat gambar berukuran 100%, dengan begini maka gambar tidak akan pernah lebih lebar dibanding ukuran layout penampungnya.
.middle img{
 max-width: 100%;
 height: auto;
}

Menjadi 2 Kolom Ketika di Tablet.

Layout akan kita buat berubah ketika ukuran layar 1080px, untuk ukuran 1080px ini sebenarnya bisa anda sesuaikan dengan kebutuhan, bisa saja 960px, atau 1000px, tergantung keinginan anda saja. Tapi sebenarnya kalau bisa sesuai dengan ukuran perangkat-perangkat yang banyak dipakai seperti iPad, Amazon kindle atau Galaxy Tab. Kode untuk merubah layout menjadi 2 kolom adalah seperti dibawah ini, kita bisa lihat bahwa untuk merubahnya kita menggunakan bantuan media query @media screen and (max-width: 1080px)yang artinya ketika ukuran layout maksimal 1080 maka tentukan CSS nya, CSS ini inherit dari kode CSS sebelumnya.
@media screen and (max-width: 1080px) {
 
 .container {
  width: 100%;
 }
 .left {
  width: 25%;
  background: #fff000;
 }
 .middle {
  width: 68%;
  float: right;
 }
 
 .right {
  clear: both;
  padding: 1% 4%;
  width: auto;
  float: none;
 }
}
Kode CSS diatas bukan hanya untuk mengatur jumlah kolom, namun juga bisa melakukan perubahan-perubahan lain seperti merubah kolom kiri menjadi berwarna kuning, atau bisa juga merubah ukuran font, bahkan warna font, seperti yang kita lihat di class .left, ditambahkanbackground: #fff000; untuk merubah background menjadi warna kuning.

Menjadi Satu Kolom Ketika di Ponsel

Layout untuk tablet tidak bisa kita pakai untuk mengakomodir ponsel, oleh karena itu ketika ukuran layar lebih kecil kita tentukan lagi css berikutnya, masih tetap dengan media query, kami merubahnya menjadi satu kolom pada ukuran 780px kebawah. Script nya adalah sebagai berikut.
@media screen and (max-width: 780px) {
 
 .header, 
 .footer{
  text-align: center;
 }
 .left {
  width: auto;
  float: none;
 }
 
 .middle {
  width: auto;
  float: none;
 }
 
 .right {
  width: auto;
  float: none;
 }

}
Pada kode css diatas tidak ditentukan lagi lebar kolom, semua div dibuatwidth: auto yang artinya dibuat memenuhi lebar layar, akhirnya terbentuk lah layout yang hanya satu kolom.
Begitulah cara sederhana membuat layout responsive, kami hanya menjelaskan prinsip dasar nya agar mudah dimengerti, jadi layoutnya dibuat sangat sederhana. Untuk project yang serius anda bisa mengembangkan lagi dengan elemen-elemen yang lain.
Untuk elemen-elemen berikutnya seperti menu responsive, video responsive, dan lainnya mungkin akan kita bahas di artikel-artikel berikutnya.
Jika anda tertarik untuk mencoba dan membuat sendiri anda bisa melihat script lengkapnya berikut ini.
Sekain tutorial kali ini, semoga membantu anda memahami cara pembuatan layout responsive agar website anda bisa dibuka di berbagai ukuran layar.

Monday, May 26, 2014

solusi unknown mysql server host localhost 11001

3:28 PM


unknown mysql server host localhost 11001,masalah mysql 11001
Tutorial ini harus terkoneksi ke internet dan ini untuk memperbaiki error saat masuk phpmyadmin pada xampp, dan juga sekaligus cara merubah password mysql di xampp :



1. ketik  localhost  pada browser kamu.
2. cllick secrity, letaknya disebelah kiri
3. click link yang tertera dibagian bawah, atau click disini http://localhost/security/xamppsecurity.php
4. isi password kamu, untuk username defaultnya "root".

Saturday, May 10, 2014

Tips Dan Trik Keamanan Web PHP

Posted by Unknown  
7:17 PM

Saat kita mulai membuat aplikasi berbasis web dengan menggunakan PHP tentu kita akan berfokus pada cara pembuatannya, bagaimana mengimplementasikan logika sehingga menghasilkan suatu karya (sistem) yang berjalan sesuai dengan keinginan dan kebutuhan kita.

Tips Dan Trik Keamanan Web PHP,security php, web programing
Tapi ada kalanya kita perlu membalik pola pikir tersebut dengan memandang sebagai seorang user (pengguna aplikasi) yang mungkin memiliki waktu lebih banyak dalam penggunaan aplikasi tersebut. Dalam hal ini banyak hal yang mungkin tidak kita perhatikan dari aplikasi buatan kita tersebut oleh karena itu ada pepatah “Tidak ada sistem yang sempurna.” tetapi penulis akan memberikan sedikit informasi keamanan dasar sehingga kita bisa sedikit melangkah menuju kesempurnaan tersebut.

Beberapa hal yang perlu diperhatikan dalam langkah percobaan para cracker untuk memboikot akses website kita antara lain :
1. Melalui URL (method GET)
2. Melalui media input yang terdapat dalam form (method POST)

Sebagaimana kita ketahui bahwa terdapat 2 cara umum pengiriman variable dalam PHP yaitu GET dan POST sehingga perlu penanganan khusus dalam penerimaan serta pengiriman variable tersebut.

Untuk method POST :
Method POST merupakan penangkapan variable dari media input yang terdapat dalam FORM.

1. Batasi jumlah karakter (maxlength)

Pembatasan jumlah karakter dalam media input sangat penting sehingga tidak dimungkinkan penulisan script seperti javascript pada inputbox tersebut.
Contoh implementasi : <input name=”_cari” maxlength=”10″ />
Titik rawan : Input Login (username dan password), Input search

2. Lapisi dengan penahan kutip atau addslashes()

Fungsi PHP ini akan membantu kita menambahkan tanda kutip (‘) pada setiap karakter garing (/) sehingga dapat mencegah timbulnya efek SQL injection. Saya rasa teknik hacking ini cukup populer diantara anda. Penambahan kutip akan membuat garing menjadi bertipe string sehingga tidak dianggap sebagai salah satu perintah query pada MySQL / SQL.
Contoh implementasi : addslashes($_POST['_username'])
Titik rawan : Form Login

3. Lapisi dengan penahan tag atau htmlspecialchars()

Untuk mencegah terjadinya teknik hacking xss atau javascript injection maka ada baiknya kita menambahkan fungsi tersebut. Hal ini akan membuat tag html maupun javascript memiliki tipe data string sehingga tidak akan dieksekusi oleh browser.
Apabila script dimungkinkan dalam media input sehingga masuk ke dalam database dan saat browser membuka halaman yang terkontaminasi tersebut maka browser akan melakukan eksekusi terhadap perintah tersebut yang biasanya dalam bentuk javascript.
Contoh implementasi : htmlspecialchars($_POST['pesan'])
Titik rawan : Form Login, Form Kontak Admin

4. Perhatikan nama media input

Sudah saatnya kita berusaha sedikit lebih unik dalam menentukan nama pada media input kita sehingga mempersulit beberapa tools penjahat yang menggunakan library (kamus kata) dalam penentuan nama variable incarannya. Misalnya pada media input login tambahkan garis bawah. Tentu anda memiliki ide sendiri dalam
mengimplementasikan hal ini.
Contoh implementasi : <input name=”_username” />
Titik rawan : Input Login (username dan password)

Untuk method GET :

Method get merupakan penangkapan variable yang berasal dari URL.

1. Gunakan .htaccess

Sebenarnya ini adalah sebuah metode yang menjadikan website kita seakan memiliki
struktur direktori yang luas, padahal itu adalah variable. Sehingga memecah
konsentrasi dari pengunjung yang berniat isenk. Bila halaman tidak ditemukan maka
kita dapat meredirectnya ke halaman 404 kesayangan kita.

Implementasi :

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?page=$1 [L]
</IfModule>

RewriteEngine on
RewriteCond %{HTTP_HOST} ^mydomain\.com$ [NC]
RewriteRule ^(.*) http://www.mydomain.com/$1 [L,R=301]

Untuk lebih jelasnya dapat dilihat disini :
http://www.ilmuwebsite.com/tutorial-php/membuat-url-mod-rewrite-part-1-http-conf

2. Hindari $_REQUEST()

Metode ini digunakan untuk menangkap variable dalam bentuk POST dan GET. Ada kalanya kita membutuhkan metode penerimaan variable dengan menggunakan fungsi ini, tetapi batasilah penggunaannya karena tanpa disadari suatu saat anda akan mendapatkan masalah karena hal ini. Dan bila kita telah terlanjur menggunakannya pada seluruh aplikasi kita maka kita akan sulit untuk merubah (Bisa, dengan memilah mana yang tidak perlu dan benar-benar menggunakan.).

Tambahan :
1. Session dan Cookies timeout
Gunakan timeout pada session atau cookies terutama untuk pengenalan login. Session merupakan penanda dari sisi server dan akan hilang apabila browser ditutup, sedangkan cookies adalah pengenalan dari sisi browser dan bila tidak diset timeout maka status akan terus login (pada pengenalan login.), tentu saja anda tau kemungkinan-kemungkinan yang akan terjadi selanjutnya.

Mungkin sampai disini dulu, karena sudah waktunya berangkat kerja. Bila ada yang ingin ditambahkan silahkan ditambahkan karena pengetahuan kita tidak akan habis dengan saling berbagi

Sumur Dari : http://www.ilmuwebsite.com/sedikit-bumbu-keamanan-php

Labels

Tips Dan Trik (37) IT (23) pelajaran tentang IT (23) stmik (22) OS (21) Berita (20) HTML5 (19) materi (18) tutorial (14) Sismul (13) Tizen (12) UI (11) web (11) Download (10) Download lagu (10) Android (9) Fitur (9) Meningkatkan Traffic (9) Samsung (9) TouchWiz (9) streaming (9) Aplikasi (8) Intel (8) Blackberry (7) Fakta (7) database (7) Handphone (6) oracle (6) Fungsi (5) Game (5) Lucu (5) SEO (5) optimal (5) sql (5) widget (5) PHP (4) Programing Languages (4) Smartfren (4) Spesifikasi (4) bbm (4) Andromax (3) Dollar (3) Gadget (3) Kata (3) Obsidian (3) Ads (2) CPM (2) Foto (2) Kata Bijak (2) adsense (2) celebrity (2) sosial (2) Crack (1) Error (1) Gaya Hidup (1) Gokil (1) Harga (1) Harlem Shake (1) PPC (1) Penyakit (1) Video (1) bola (1) reggae (1)

Daftar BackLink

AutoSurf Traffic Exchange: Powerful Results with SEO tips | 10KHits - 10KHits provides quality traffic hits to your personal or business websites. Auto Backlink Gratis : Filedoom Auto Backlink Gratis Indonesia : Top Link Indo
W3 Directory - the World Wide Web Directory

Site Info

SEO Reports for filedoom.blogspot.com Antispam
filedoom.blogspot.com Webutation
LinkXchanger.com
Latest Downloads

Rating for filedoblogspotom..com DMCA.com
Protected by Copyscape Online Plagiarism Finder

My Facebook

My Profil

Proudly Powered by Blogger.
back to top