isMediaNet

Tampilkan postingan dengan label programming. Tampilkan semua postingan

Sabtu, 01 Oktober 2011

Dasar-dasar PHP

Fungsi Dasar PHP

Tujuan

Setelah praktikum ini diharapkan mahasiswa mampu menggunakan fungsi : array, calendar, date,directory, http, operasi string, serta file upload. Selain itu, dalam praktikum ini mahasiswa diperkenalkan juga PHP manual.

Tools

Praktikum ini menggunakan tools : Apache web server dan PHP, text editor

Langkah-langkah praktikum

Baca selengkapnya »

Minggu, 25 September 2011

Membuat halaman web dengan div dan kombinasi Jquery untuk menyamakanpanjang kolom

Hai para isser (penggemar, pembaca tutorial dari islah prod yang dipublish melalui blog http://ismedianet.blogspot.com ), setelah beberapa waktu yang lalu membaca posting tentang salah satu cara mencegah SQL injection pada web dan bagaimana langkah-langkah membuat menu pada web, ada yang merasa kurang nda? Gmn? Tidak…. Ada… seharusnya ada hehe… coz belum dipublish tutorial untuk membangun halaman web, bagian utama dari web. Koq bisa disebut sebagai halaman utama web knp? Yah karena bagian tersebut yang akan menjadi dasar web kita dari side bar, content, header, footer dll. Sebenarnya ada banyak jenisnya salah satu contoh sederhana halaman juga terdapat pada posting terdahulu pada posting tentang SQL injection, disitu juga terdapat sedikit scripting tentang halaman login yang tidak jauh beda dengan halaman utama tapi tentunya sedikit lebih komplek pada halaman utama ketimabng halaman login saja karena disitu terdapat lebih dari satu bagian seperti yang telah dijelaskan tadi ada header, footer, sidebar (right content, middle content, left content) dll.

OK deh langsung dimulai aja tutorialnya… sudah siap? Are you ready? Berdoa dulu.. hehe.. biar dimudahkan untuk memahami hehe…

Siapkan notepad++ atau sejenisnya, browser, JQUERY, untuk kelengkapan selain aplikasinya dapat diunduh dibawah. Nah lo… koq ada JQUERY segala emang buat apa?nie.. buat pembaca yang bernah mencoba membangun halaman web sendiri mungkin prenah sedikit frustasi koq kolom-kolomnya tidak memiliki ukuran yang sama, nah Jquery disini akan menyediakan fungsi untuk menyamakan ukuran kolom-kolom tersebut. Di css sebetulnya juga menyediakan penyamaan kolom tersebut namanya faux column namun terkadang berjalan kurang sempurna pada IE… hehe apa itu faux column yah itu tadi barusan dijelaskan yang intinya untuk menyamakan ukuran kolom, untuk lebih jelasnya silakan searching menggunakan searc engine.

Mulai tutorial.. siapkan file page.html sebgai tempat kombinasi file jquery, css, html dan link ke file gambar atau singkatnya untuk menggabungkan semua file, setelah itu jquery.equalizecols.js, jquery-1.4.js, style.css, dan folder images sebagai tempat gambar.

Page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="jquery.equalizecols.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#leftcontent, #middlecontent, #rightcontent").equalizeCols();
});
</script>
</head>
<body>

<div id="wrapper">

<div id="container">

<div id="header">
bagian header

<div id="menu">
<ul>
<li><a href="#">menu 1</a>
<ul>
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
<li><a href="#">menu 5</a></li>
</ul>
</li>
<li><a href="#">menu 2</a>
<ul>
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
<li><a href="#">menu 5</a></li>
</ul>
</li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
<li><a href="#">menu 5</a></li>
</ul>
</div>
</div>
</div>

<div id="leftcontent">
<p>
bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman
bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman
bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman
</p>
</div>

<div id="middlecontent">
<p>
bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah
halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman
</p>
</div>

<div id="rightcontent">
<p>
bagian kanan
</p>
</div>


<div id="clearer"></div>

<div id="footer">Copyright © 2011 by islah production All Rights Reserved.</div>
</div>
</body>
</html>

Style.css

/*tampilan Body, Berlaku untuk semua yang berada di dalam body secara default*/
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #6b733c;
margin: 0px;
background-color: #FFFFFF;
}
#wrapper {
background:#c2c3bb url(images/background.jpg);
background-repeat: repeat-y;
width: 900px;
margin-right: auto;
margin-left: auto;
}

/*Top Menu*/
#wrapper #container #menu {
width: 900px;
position: relative;
top: 140px;
left: 0px;
margin: 0;
padding: 0;
background:url(images/bgmenu.png) repeat-x;
clear: both;
margin: 0px;
}
#container #menu ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
border: 0;
height: 40px;
}
#container #menu ul li {
list-style-type: none;
position: relative;
float: left;
}
#container #menu ul li a{
display: block;
float: left;
height: 22px;
width: auto;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
font-weight: bold;
color: #000;
text-decoration: none;
padding-bottom: 0px;
border-right: 1px solid #1F1010;
border-left: 1px solid #fcfcf4;
}
#container #menu ul li a:hover {
color: #fff;
background-color: #000;
}
#container #menu ul li ul {
display: none;

}
#container #menu ul li:hover ul {
display: block;
position: absolute;
left: 0px;
top: 32px;
z-index: 1;
}
#container #menu ul li:hover ul li a {
display: block;
left: 0px;
color: #000;
background-color: #ededea;
width: 200px;
height: 14px;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
border: 1px solid #ededea;
padding: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#container #menu ul li:hover ul li a:hover {
left: 0px;
color: #FFFFFF;
border: 1px solid #000;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}

/*Header*/
#wrapper #header {
background:#000 url(images/header.jpg);
height: 183px;
width: 900px;
}
#wrapper #leftcontent {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
line-height: 155%;
}

#wrapper #middlecontent {
background-color: #680102;
float: left;
width: 490px;
padding-right: 5px;
padding-left: 5px;
color: #FFFFFF;
text-align: justify;
}

#wrapper #rightcontent {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
}
#wrapper #clearer {
clear: both;
}
#wrapper #footer {
font-size: 10px;
color: #FFFFFF;
background:#000;
text-align: center;
height: 50px;
width: 900px;
line-height: 275%;
}
#wrapper #leftcontent a:link {
color: #EE1C24;
text-decoration: none;
}
#wrapper #leftcontent a:visited {
color: #EE1C24;
text-decoration: none;
}
#wrapper #leftcontent a:hover {
color: #6600CC;
text-decoration: underline;
}

#wrapper #middlecontent a:link {
color: #FF0;
text-decoration: none;
}
#wrapper #middlecontent a:visited {
color: #FF0;
text-decoration: none;
}
#wrapper #middlecontent a:hover {
color: #FFFFFF;
text-decoration: underline;
}

#wrapper #rightcontent a:link {
color: #0000FF;
font-weight:bold;
text-decoration: none;
}

#wrapper #rightcontent a:visited {
color: #0000FF;
font-weight:bold;
text-decoration: none;
}

#wrapper #rightcontent a:hover {
color: #EE1C24;
font-weight:bold;
text-decoration: underline;
}

#menuheader {
width:100%;
height:30px;
background-color:#999;
}

membuat halaman (pdf)
source code (rar)

Selasa, 06 September 2011

Instalasi Wordpress offline, blogging tanpa internet

Bismillaahirrohmaanirrohiim J

Untuk memulai wordpress offline beberapa aplikasi yang diperlukan antara lain file wordpress offline dan aplikasi server local. Setelah di tulisan yang lalu dijelaskan panjang, lebar (hehe kaya luas aja panjang kali lebar ) tentang cara instalasi aplikasi server xampp nah sekarang waktunya untuk memanfaatkan hasil instalasi tersebut. Mau tau? Ikuti aja langkah-langkahnya. Eits….. kalau ada yang belum tau atau belum baca tutorial instalasi xampp silakan kunjungi http://rumahilmu.wordpress.com download filenya J

Langkah-langkah instalasi.

Setelah terinstal aplikasi server, disini kita menggunakan xampp, siapkan file wordpress ofline dan letakkan di folder htdocs pada folder xampp. Letak folder xampp bervariasi namun dalam keadaan default terletak di sistem c

Langkah selanjutnya silakan aktifkan server local melalui control panel xampp

Muncul halaman control panel xampp,aktifkan apache sebagai server dan Mysql aplikasi database

Buka browser dan tuliskan alamat urlnya sesuai nama folder wordpressnya. Keadaan default alamatnya http://localhost/wordpress sehingga muncul halaman berikut, kemudian tekan Create A Configuration File

Munculah halaman berikut ini yang menerangkan tentang konfigurasi database, tekan Let’s go

Nah kemudian isikan konfigurasinya. Nah untuk kali ini ikutin dulu ya… silakan isikan seperti ini. Database name isikan wordpress, User name: root, Password:(kosongkan), Database Host:localhost, Table prefix:wp_(biarkan saja)

Sebelum submit silakan atur database dengan membuka halaman baru (new tab) dan isikan alamat http://localhost/phpmyadmin sehingga muncul halaman management database local, pada create new database isikan wordpress kemudian klik create

Setelah itu terbentuklah database dengan nama wordpress

Setelah itu kembali lagi ke halaman wordpress pada langkah ke enam dan tekan submit sehingga muncul halaman berikut

Kemudian tekan Run the install sehingga muncul halaman berikut dan isi form tersebut

Setelah semua form terisi, tekanlah install wordpress sehingga muncul halaman berikut ini

Instalasi wordpress telah berhasil, silakan melakukan login untuk memulai blogging, masukkan user name dan password sesuai dengan form pada langkah ke 10

Halaman setelah login, halaman Admin tempat pengaturan blog

Tampilan blog secara default, sebelum ada pengaturan pada halaman admin

Selamat mencoba, semoga sukses, nantikan cara pengaturan dan cara mendapat penghasilan dari blog, internet di http://rumahilmukita.wordpress.com

download kelengkapan disini dan ini

Instalasi aplikasi localhost, server local pada PC

Belajar blogging offline, “Tanpa Koneksi Internet”

Belajar blogging secara offline? Apa itu? Wah ngeCE, masa kaga tau apa itu offline. Offline disini itu artinya belajar ngeblog tanpa koneksi internet. Tapi itu pengertian spesifik di tulisan ini sesuai dengan bahan kajian kita berkaitan dengan ngeblog. Kalau pengertian offline secara harfiah, liat aja di kamus hehe, enak aja gue yang nyariin J

Untuk memulai belajar blog di computer rumah yang ka ga ada koneksi internet butuh aplikasi server salah satunya xampp dan pada pembelajaran kali ini kita menggunakan aplikasi xampp

Langkah-langkah instalasi aplikasi server xampp

klik installer aplikasi xampp sehingga muncul window seperti di bawah ini. Window ini member pilihan kepada kita untuk memilih tempat penyimpanan instalan aplikasi di hardisk, keadaan normal instalasi di tempatkan di C

Untuk mengubah folder penyimpanan tekan tombol browse sehingga muncul window di bawah ini.

Setelah memilih tempat penyimpanan tekan OK, maka akan keluar proses berikut ini

Setelah installation progress full maka akan keluar command prompt seperti di bawah ini yang memberikan pilihan kepada kita untuk menampilkan shortcut aplikasi xampp di desktop atau start menu. Sebaiknya pilih y supaya memudahkan. enter

Setelah menekan enter maka akan muncul pertanyaan notifikasi untuk meyakinkan pilihan kita. Pilih y dan enter lagi

Setelah itu akan muncul pertanyaan apakah aplikasi xampp tersebut mau dijadikan portable atau tidak. Pilih n aja

Berjalanlah proses seperti terlihat di window berikut ini kemudian tekan enter

Keluarlah window pertanyaan berikut ini. Tekan enter lagi

Proses instalasi selesai…. Gampang kan….

Untuk langsung mengaktifkan control panel aplikasi server pilih 1 kemudian enter, maka akan muncul window control panel. Dalam keadaan normal kita dapat menampilkan control panel dengan memilih icon pada desktop atau start menu atau di folder aslinya

Untuk memulai aplikasi server klik start Apache dan Mysql. Pada beberapa terkadangt muncul notifikasi dari windows, close aja atau unblock atau ask me later. Saran close aja

Tapilan control panel saat running

Silakan tes dengan membuka browser dan isikan alamat http://localhost

Halaman awal permintaan konfigurasi

Pilih bahasa yang Anda kuasai, saran English, sehingga muncul tampilan

nah selesai dah…. Selamat mencoba

Download file doc penuh penjelasan dan gambar di <download dokumen penuh dan gambar>

Sabtu, 02 Juli 2011

Dasar-dasar membangun halaman web

Praktek Pembuatan web dengan notepad

Cara Menyimpan File Menyimpan File Script
Tahap-tahap untuk menyimpan file setelah temen-temen mengetik script-script HTML

Click tombol “File” pada taskbar notepad, kemudian pilih “Save”.

Pada field isian nama file (filename) , ketikkan namafile.html (contoh: latihan1.html)

Cobalah dengan membuka browser (IE, mozila, atau google chrom sesuai yang dimiliki temen-temen)

Click pada menu "File .."

Pilih pada option "Open .." carilah file yang telah Anda buat(arahkan ke tempat penyimpanan file yang telah dibuat dari notepad)

Lihatlah apa yang terjadi atau temen-temen juga langsung bisa membuka file hasil dari notepad tadi tanpa harus membuka browser terlebih dahulu dengan langsung membukadari folder penyimpanan file yang telah dirubah ekstensinya menjadi HTML, secara automatis akan terbukaemalui browser default temen-temen

Cara Mengedit File Script
Saat ini anda telah membuka dan menampilkan hasil kerja anda dalam suatu web browser, sekarang anda dapat melanjutkan pekerjaan anda dengan menambahkan dan mengedit file html tersebut, kemudian menyimpan hasil perubahan tersebut dan lalu menampilkan hasil perubahan file itu. Anda akan lebih produktif jika anda belum menutup web browser anda; cukup hanya dengan me-minimize web browser dan melanjutkan pekerjaan anda. Ketika anda ingin menampilkan hasil kerja anda yang sudah diedit:

simpan hasil perubahan file html anda

pindah ke aplikasi web browser

Pada Ms Internet Explorer tekan tombol "REFRESH"

Web Browser akan me-load dokumen yang sama tapi dengan revisi baru tadi. Proses ini adalah siklus Edit, Save, dan View.

Dasar-Dasar HTML
HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML berfungsi untuk ’memperindah’ file teks biasa untuk ditampilkan pada program web browser. Hal ini dilakukan dengan menambahkan elemen atau sering disebut sebagai tag-tag pada file teks biasa tersebut. Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan simbol lebih besar (<) dan (>). Pasangan dari sebuah tag ditandai dengan simbol garis miring (/). Misalnya pasangan dari tag <contoh> adalah </contoh>. Dalam hal ini <contoh> kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut: <contoh atribut1=”nilai_atribut1” atribut2=” nilai_atribut2” … >. Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah

Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai beriku

<html>
<head>
<title>teks pada title bar web browser</title>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang
tampil pada dokumen web.
</body>
</html>

Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag <head> ... </head> dan tag <body> ... </body>. Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> ... </title> yang berfungsi untuk mengeluarkan judul pada title bar window web browser. Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini Anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin Anda sampaikan pada pengguna nantinya.

Ok selamat mencoba temen-temen

Dikutip dari "Pemrograman INternet Dasar karya Bimo Sunarfri Hantono"

Pages

isMediaNet

Labels

Total Tayangan Halaman

Easy to understand

Daftar Link

Kategori