Scroll Page Menggunakan Id

 

Pada umumnya suatu website terdiri dari lebih dari satu halaman. Misalnya index, about, gallery, contact dan lain-lain. Tapi mungkin anda pernah melihat suatu website yang hanya terdiri dari satu page/halaman saja. Website-website seperti ini biasanya cenderung panjang kebawah atau format halamannya scroll kebawah. Saat kita mengklik menu kita tidak diarahkan ke halaman yang baru hanya saja langsung diarahkan scroll ke bawah.

Bagaimana cara kerjanya? Apa saja kode yang digunakan?

Ternyata cara ini tergolong simple hanya saja tidak terlalu sering digunakan. Kuncinya adalah kita harus menggunakan Id. Suatu id tidak boleh digunakan lebih dari satu kali dalam suatu file. ok langsung saja berikut cara scroll page menggunakan id.

  1. buat element id yang didalamnya bisa diisi dengan apa saja yang ingin kita tampilkan

 

<div id=”home”>
isi disini teks gambar dan lain-lain
</div>

  1. buat link yang referensinya menuju id yang dinginkan agar bisa mengakses dan diarahkan langsung ke id tersebut

<a href=”#home>Go to Home</a>

 

 

 

 

MEMBUAT TEKS BERBAYANG PADA PHOTOSHOP

Assalamualaikum Wr. Wb.

Alhamdulillah, pada kesempatan kali ini Webhozz akan berbagi ilmu lagi. Kali ini kita akan ngulik photoshop.

Dalam web desain, tentunya kita pernah melihat hampir tiap website punya banner gambar yang berbau promosi. Tentunya dalam banner tersebut juga ada pesan dan kesan yang ingin disampaikan ke pengunjung web.

Penggunaan huruf dalam banner tersebut juga merupakan faktor penentu juga dalam menyampaikan pesan. Tampilan teks yang baik juga akan membuat pesan yang ingin disampaikan jadi makin menarik dan memberikan pesannya mudah diingat.

Oke dalam tutorial kali ini, kita akan belajar membuat teks pada Photoshop. Kita akan belajar membuat teks tersebut dengan cara dasar.

Kita akan membuat teks dengan efek berbayang di belakang teksnya. Sehingga teks tersebut bisa memberikan kesan 3D kepada pengunjung.

Oke, mari kita mulai.

  1. Pertama-tama, seperti biasa. Buka aplikasi photoshop

 

2. Buat file baru dengan klik menu File>New atau pintas keyboard Ctrl+N. Maka akan muncul menu seperti di bawah ini. Kita akan membuat sebuah gambar, dengan lebarnya 1000px dan tingginya 300px.

 

3. Maka nanti akan tampil sebuah bingkai foto seperti di bawah ini. Yang mana ini nanti bakal kita tambah desain tampilannya.

 

 

4. Selanjutnya klik dan pilih fitur Horyzontal Type Tool, yang mana nanti berfungsi untuk menambahkan tulisan pada foto.

 

5. Jika sudah klik fitur tersebut, arahkan mouse ke arah foto yang kita buat tadi. Kemudian klik dimanapun sesuka hati kita, lalu masukkan tulisan yang kita inginkan.

 

 

6. Oke, untuk menghasilkan teks tersebut. Yang meliputi jenis font, stylenya, ukurannya, bahkan ke warna teksnya. Kita bisa lakukan dengan mengotak-ngatik menu yang sudah ditandai merah di bawah ini.

 

 

7. Selanjutnya, klik menu Layer>Layer Style>Blending Options. Nanti akan tampil menu seperti di bawah ini.

 

 

8. Klik bagian Drop Shadow, maka akan tampil seperti berikut ini. Dan teksnya nanti juga akan memiliki sedikit bayangan.

 

 

9. Pada bagian ini, bisa mengatur kapasitas bayangan pada teksnya. Misalnya, disini kita coba atur Opacitynya 65%, Anglenya 143 derajat, Distance 8px, Spread 1%, dan Sizenya 5px. Selanjutnya silahkan coba berdasar kreativitas masing-masing.

 

 

10. Klik OK, maka hasilnya akan menjadi seperti ini.

 

 

11. Dan yang terakhir adalah kita simpan filenya menjadi format.jpg. Seperti biasa Klik File>Save As atau Ctrl+S.

Dan beginilah hasilnya, banner sederhana dengan teks berefek bayangan.

Alhamdulillah, kali ini cukup sampai disini dulu ya sahabat Webhozz. Akhir kata, semga artikel ini bermanfaat, Amin.

 

Wassalamualaikum Wr. Wb.

 

Created by :  Danny Julian Pratama 

 

Cara Sederhana Mencerahkan Foto pada Photoshop

 

 

Assalamualaikum. Wr. Wb.

Alhamdulillah, sobat Webhozz dimanapun berada. Pada kesempatan kali ini Webhozz akan posting lagi untuk berbagi ilmu yang bermanfaat, kali ini tentang Photoshop lagi.

Oke, tentunya kita pasti pernah ngambil gambar dari kamera Smartphone. Saat selesai pengambilan gambarnya, malah buram atau kurang cerah. Biasanya tentu disebabkan oleh pencahayaan sekitar objek foto, atau bisa jadi kualitas kameranya, atau bisa jadi kita ingin sekedar menambahkan suasananya menjadi lebih terang pada foto hasil jepretan tersebut.

Dan langsung saja ya kita mulai. Jika sudah siap, silahkan siapkan foto yang akan kita edit, dan buka aplikasi Photoshopnya.

Fotonya udah siap, Photoshopnya juga udah dibuka? Sebelumnya kita teori dulu ya. Kali ini kita menggunakan salah satu menu Photoshop, yaitu Curves. Yang mana Curves ini berfungsi untuk mengatur gelap terangnya pada suatu objek foto. Kurang lebihnya, mari kita coba sama-sama. Silahkan ikuti langkah berikut.

  1. Pertama buka dulu bahan foto yang tadi kita siapkan lewat aplikasi Photoshop.

 

2. Klik menu Image>Curves, atau pintas keyboardnya Ctrl+M. Nanti akan tampil menu berbentuk grafik seperti di bawah ini.

 

3.     Seperti yang kita lihat pada langkah ke-2, disitu ada garis. Yang mana garis tersebut bisa kita gerakkan.

a. Jika kita gerakkan ke atas, maka gambar akan semakin terang, jika kita gerakkan ke bawah maka akan semakin gelap.

b. Selain itu, kita bisa membuat beberapa titik gelap terangnya dengan mengklik di beberapa titik garisnya, seperti di bawah ini.

c. Kita juga bisa menambahkan beberapa titik garisnya lalu naikkan ke atas atau ke bawah, sehingga bentuknya seperti grafik yang naik turun.

4.     Oke, jadi seperti itulah cara penggunaannya. Sisanya silahkan coba sesuai dengan resolusi bahannya hingga ke kreatifitasnya masing-masing. Jika sudah menemukan titik yang pas, silahkan klik Ok. Dan simpan filenya menjadi format .jpg.

Dan beginilah hasilnya setelah diedit.

Dan beginilah saat pertama kali sebelum diedit.

Jadi, begitulah sekilas tentang menu Curves pada Photoshop. Sekali lagi, sisanya kembali kepada kreatifitas masing-masing. Selamat mencoba ya.

Alhamdulillah, demikianlah tutorial dari Webhozz kali ini. Insya Allah akan update artikel lagi yang bermanfaat lagi. Dan akhir kata, maaf bila ada kekurangan pada artikel kali ini. Semoga bermanfaat ya, Amin.

Wassalamualaikum Wr. Wb.

Created By : Danny Julian Pratama 

 

Android Aplikasi : Exit Menggunakan Cordova

 

Untuk membuat exit aplikasi android berbasis cordova caranya cukup simple. Kita tinggal menambahkan beberapa baris kode tanpa harus menambahkan plugin apapun. Bagi anda yang masih awam dengan materi pembuatan aplikasi android  berbasis cordova saya sarankan untuk mempelajari dulu bagaimana cara membuat aplikasi android berbasis cordova  <a href“https://www.webhozz.com/program/kursus-android.php”>disini</a>.

Langsung saja berikut cara untuk membuat exit aplikasi android berbasis cordova :

 

<!DOCTYPE html>

<html>

<head> <title></tiltle>

</head>

<body>

<a herf=”#” onclick=”exitFromApp()”>Exit Link</a> <br>

<button onclik=”exitFromApp()”> Exit Button </button>
<script type=”text/javascript” src=”cordova.js”>

</script><script type=”text/javascript”>

function exitFromApp()

{

var x ” confirm(“Yakin keluar ?”);

if( x “” true ){

navigator.app.exitApp();

return true;

}

else{

return false;

}

}

</script>

 

</body>

</html>

Syarat agar exit berjalan dengan baik adalah file HTML harus terhubung dengan file cordova.js karena fungsi exit pada android sudah termasuk fitur native android cordova. Selamat mencoba.

Form Dengan Looping

 

  1. Kombinasi Form dengan Looping

Biasanya , saat kita akan membuat sebuah inputan data , kita hanya bisa memasukkan data satu per satu . tentu saja hal itu kurang efektif , apalagi jika data yang di masukkan ada banyak . Maka dari itu , untuk mempercepat penginputan data , kita dapat menggabungkan form dengan looping (perulangan) . Sehingga kita dapat memasukkan data lebih dari satu sekaligus ke dalam database .

 

  1. Pembuatan Form dengan Looping

Pertama , buat file dengan nama form_looping.php di dalam htdocs .

 

Kemudian masukkan script di bawah ini ke dalam tag <body>

 

<h2>Masukkan Jumlah Data</h2>

<form action=”#” method=”post”>

<input type=”text” name=”jumlah” placeholder=”masukkan jumlah data”>

<input type=”submit” name=”tambah” value=”Tambah”>

</form>

<br><br><br>

Maka tampilan dari script di atas adalah

Kemudian tambahkan script di bawah ini ke dalam tag <body> . Letakkan script di bawah script yang pertama tadi .

 

<?php

if($_POST[‘jumlah’])

{

?>

<form action=”” method=”post”>

<?php

$jumlah = $_POST[‘jumlah’];

 

for($a=1;$a<=$jumlah;$a++)

{

?>

<b>Data Ke – <?php echo $a; ?></b><br>

Input Nama <br>

<input type=”text” name=”nama<?php echo $jumlah; ?>”><br><br>

Input Alamat <br>

<textarea name=”alamat<?php echo $jumlah; ?>”></textarea><br><br>

<?php

}

 

?>

<input type=”submit” name=”” value=”Simpan”>

</form>

<?php

}

?>

Kemudian jalankan file form_looping.php di browser . Masukkan jumlah data yang akan di masukkan .

 

 

Pengertian Router dan Proxy

Router
Router adalah perangkat yang digunakan untuk membagi protokol kepada anggota jaringanyang lainnya dengan adanya router maka sebuah protokol dapat di sharing kepada perangkat jaringan lain.

Jenis-jenis Router

  • Router Aplikasi, adalah router yang dapat kita instal pada sistem operasi.
  • Router Hardware, adalah hardware yang mempunyai kemampuan seperti router.
  • Router PC, adalah sistem operasi yang memiliki fasilitas untuk membagi dan mensharing informasi.

Fungsi Router

  • Sebagai penghubung anatara dua atau lebih jaringan untuk meneruskan data dari satu jaringan ke jaringan lainnya.
  • Menstranmisikan informasi dari satu jaringan ke jaringan lain yang sistem kerjanya sama seperti dengan bridge.
  • Untuk menghubungkan LAN kesebuah layanan telekomunikasi.
  • Untuk menghubungkan jaringan lokal kesebuah koneksi DSL router.
  • Sebagai DHCP server
  • Sebagai DNS
  • Sebagai Firewall
  • Sebagai Proxy server
  • WLAN

Proxy

               Proxy adalah sebuah perantara yang bertindak sebagai perantara permintaan dari pengguna layanan (client) mencari sumber daya dari client lain.

Jenis Proxy Sesuai Tujuannya

  • Menjaga mesin
  • Meningkatakan pencapai laluan kesumber.
  • Menerapkan aturan pencapai laluan terhadap internet atau isinya. Misal memblokir situs.
  • Menyediakan pelaporan penggunaan internet karyawan perusahaan demi pelaporan pengujian.
  • Melewati kendali keamanan.

 

Jenis Proxi Sesuai Kegunaanya

  • Transparan Proxy, adalah proxy yang tidak mengubah permintaan atau respon melampaui apa yang diperlukan untuk otentkasi proxy dan identifikasi.
  • No Transparan Proxy, adalah proxy yang mengubah permintaan atau respon untuk memberikan beberapa layanan tambahan kepada pengguna.

 

Keuntungan

  • Keamanan jaringan lebih terjaga.
  • Pengaksesan kembali terhadap situs-situs yang telah diakses sebelumnya menjadi lebih cepat.
  • Terdapat fasilitas filtering, baik pengguna content, dan waktu akses.

 

Kekurangan

  • Pengaksesan terhadap situs yang belum pernah dibuka sebelumnya akan menjadi lebih lambat.
  • Bila proxy server terlambat melakukan update cache, maka client akan mendapatkan content yang belum update ketika melakukan request content.

Penggunaan Tag Form

A. Jenis-jenis inputan dalam Tag Form

Dalam membuat sebuah inputan data, kita dapat menggunakan tag form yang terdapat dalam bahasa HTML . Terdapat banyak pilihan inputan di dalam tag form . Berikut jenis-jenis inputan dalam tag form :

  1. Textbox

Untuk membuat inputan textbox maka tag yang di gunakan adalag tag <input> dengan type = “text” . Berikut contoh script nya :

<input type=”text” name=””>

  1. Radio Button

Jika ingin menggunaka radio button dalam html , tag yang di pakai adalah tag <input> dengan type = “radio” . Berikut Contoh radio button :

<input type=”radio” name=”” value=””>

  1. Checkbox

Checkbox merupakan inputan untuk memilih data lebih dari satu . Berikut contoh script untuk checkbox :

<input type=”checkbox” name=”” value=””>

  1. Textarea

Textarea mirip dengan textbox , namun jika menggunakan inputan textarea , dapat memasukkan daa lebih dari 1 baris . Contoh script dari textarea sebagai berikut :

<textarea name=””></textarea>

  1. Select

Tag select di gunakan untuk membuat list sebuah pilihan . Script dari tag select seperti di bawah ini :

 

<select name=””></select>

Untuk menamahkan pilihan dalam tag select , tambahkan tag <option> ke dalam tag <select> seperti di bawah ini :

<select name=””>

<option value=”Pilihan 1″>Pilihan 1</option>

<option value=”Pilihan 2″>Pilihan 2</option>

<option value=”Pilihan 3″>Pilihan 3</option>

</select>

  1. Password

Lalu untuk membuat inputan password , tag yang di gunakan adalah tag <input> dengan type = “password” . Berikut contoh penulisan inputan password :

<input type=”password” name=””>

  1. Submit Button

Untuk membuat tombol submit , tag yang di pakai adalah tag <input> . Berikut contoh nya :

<input type=”submit” name=”” value=”Simpan”>

  1. Reset Button

Kebalikan dari submit button , reset button berfungsi untuk membersihkan area inputan ketika kita ingin membatalkan inputan . Contoh script reset button seperti di bawah ini :

<input type=”reset” name=”” value=”Batal”>

B. Membuat Form Biodata

Untuk membuat tampilan form input biodata , masukkan script di bawah ini ke dalam text editor , kemudian simpan file dengan nama biodata.html ke dalam folder C:/XAMPP/htdocs

<!DOCTYPE html>

<html>

<head>

<title>Biodata</title>

</head>

<body>

<h2>Form Biodata</h2>

<form action=””>

Nama  <br>

<input type=”text” name=”” placeholder=”masukkan nama …” >

<br><br>

Password  <br>

<input type=”password” name=”” placeholder=”masukkan password ..”><br><br>

Jenis Kelamin  <br>

<input type=”radio” name=”jekel” value=”Laki-laki” checked> Laki-laki

<input type=”radio” name=”jekel” value=”Perempuan”> Perempuan<br><br>

Hobi   <br>

<input type=”checkbox” name=”” value=”Bola”> Bola

<input type=”checkbox” name=”” value=”Basket”> Basket

<br><br>

Pilihan <br>

<select name=””>

<option>-pilih-</option>

<option value=”Pilihan 1″>Pilihan 1</option>

<option value=”Pilihan 2″>Pilihan 2</option>

<option value=”Pilihan 3″>Pilihan 3</option>

</select><br><br>

Alamat  <br>

<textarea name=””></textarea><br><br>

<input type=”submit” name=”” value=”Simpan”>

<input type=”reset” name=”” value=”Batal”>

</form>

</body>

</html>

Maka tampilan dari script di atas saat di jalankan dalam browser seperti di bawah ini :

 

Penggunaan substr pada Php

 

Terkadang dalam suatu website kita sering melihat suatu paragraf yang tidak selesai atau terpotong. Sebenarnya itu adalah salah satu fungsi substr pada php. Substr merupakan kode php yang digunakan untuk memanipulasi objek teks. Bisa jadi mengatur jumlah teks yang akan dimunculkan pada suatu paragraf atau bisa juga sebaliknya yaitu menghilangkan sebagian teks dalam suatu paragraf.

  1. Substr dengan menggunakan 1 nilai

Berfungsi untuk menghilangkan karakter huruf dari huruf pertama sampai dengan huruf yang dimaksud. Contoh diatas huruf yang hilang dari paragraf tersebut adalah huruf pertama sampai dengan huruf ke 25. Selebihnya akan tampil seperti biasa.

  1. Substr dengan menggunakan 2 nilai

Berfungsi untuk menampilkan karakter huruf dari huruf pertama sampai dengan huruf yang dimaksud. Contoh diatas huruf yang tampil dari paragraf tersebut adalah huruf pertama sampai dengan huruf ke 148. Selebihnya akan hilang atau tidak ditampilkan.

 

Instalasi SMF (Simple Machine Forum) di Spanel

SMF  (Simple Machine Forum) adalah sebuah paket mesin software yang pro yang memperbolehkan anda untuk mengeset komunitas online anda hanya dalam beberapa menit. Software ini ditulis dengan menggunakan bahasa PHP dan MySQL sebagai databasenya. Walaupun mendukung beberapa database yang sedang dikembangkan adalah versi 2.0. MySQL lebih dianjurkan.

Fitur yang Ada Pada SMF?

SMF terintegrasi dengan fitur seperti:

  •  Paket penginstalan otomatis didalam satu tema.
  •  Template Email untuk mengatur forum email yang mudah.
  •  Pusat Moderation termasuk post, topic and attachment.
  •  Kemampuan untuk membuat profil umum.
  •  Izin perbaikan seperti grup pewarisan dan izin profil.
  •  Pengaturan tandatangan yang ahli yang mengizinkan administrator mengatur tiap pengguna.
  •  Perbaikan pesan pribadi dan menambahkan naskah untuk tampilan pengguna.

Upload source code SMF3w13q51

Silahkan upload source code SMF keSpaneldengancara :

  1. login kespanellalumasukke menu File >kelola subdomain >namadomain>kelola file atau menu file > sites >namadomain (tanpa www) > www
  2. klik menu file kembali> upload file > choose file

3 kemudian klik tombol upload (apabiladalambentuk zip/tar dapat anda ekstrak dimenu sebelah kanan table)

Note : source code dapat anda dapatkan di http://download.simplemachines.org/

Mempersiapkan database

Sebelum memulai instalasi Joomla, terlebih dahulu Anda mempersiapkan nama database baru yang akan digunakan. Berikut langkah-langkahnya:

  1. Dari menu utama SPANEL, pilih menu Database –> MySQL
  2. PilihTambah Database, laluisikan Nama Database, Username Database beserta Password (minmal 8 karakterdengankombiniasihurufdanangka, misal: qwert1234)
  3. KliktombolTambah

Proses instalasidilakukanlewat web browser

Silahkanakses domain/subdomain dimana Joomla akandiinstall (misal: http://namadomainAnda.com)

  1. Kliktombol CONTINUE. Pada step 1 welcome
  2. Tahapselanjutnya Checking Files are Writable (rubah permission folder menjadi 775 dan file menjadi 664)
  • attachments
  • avatars
  • cache
  • Packages
  • Packages/installed.list
  • Smileys
  • Themes
  • agreement.txt
  • Settings.php
  • Settings_bak.php

Note :Untukmelewatilangkahinidapatmerubah permission dispaneldengancara :

login spanel> domain >kelolasubdomain  >namadomain> setting >JalankanSkrip CGI atau PHP Sebagai…(user cgike user sendiri)

  1. untuktahap database setting

servername = localhost

username = username database yang andabuatsewaktumelakukanpersiapan database

password = password database yang andabuatsewaktumelakukanpersiapan database

databasename = nama database yang andabuatsewaktumelakukanpersiapan database

Table prefix = smf_

 

 

  1. Pada step Forum Settings masukkan forum name dan forum url
  2. klik continue pada step Populated Database
  3. kemudianpada step Create Your Account adalahmembuat user login admin dan padabagian Database Password masukkan password database yang andabuatsewaktumelakukanpersiapan database.
  4. padatahapterakhir Congratulations, the installation process is complete! (centang Click here to delete this install.php file now)

Sampai di sini proses installasi SMF Anda sudah selesai. Silahkan akses domain/subdomain Anda untuk melihat hasilnya.