Showing posts with label Web Development. Show all posts
Showing posts with label Web Development. Show all posts
Hi sis
siang ini saya ingin berbagi tutorial tentang framework css yaitu bootstrap

sebelumnya kamu sudah tahu apa itu bootstrap?
Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device.

ok.. sudah tahu tentang bootstrap kan? sekarang lanjut ke topik kita, tutorial membuat navbar dengan bootstrap.
Hal pertama yang mesti sobat lakukan adalah dengan mendownload framework bootstrap, sobat bisa kunjungi link ini

kemudian extract filenya ke file c://xampp/htdocs
oh iya, sebelumnya pastikan anda sudah menginstall xampp, jika belum, silahkan download disini dan install xampp seperti biasa.

kembali ke bootstrap yang sudah diextract tadi, perhatikan struktur filenya seperti ini :

-css
- bootstrap.css
- bootstrap-min.css
- bootstrap-theme.css
- bootstrap-theme-min.css

-fonts
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
- glyphicons-halflings-regular.woff2

-js
- bootstrap.js
- bootstrap-min.js
- npm.js

selanjutnya kita butuh jquery.js untuk menambah responsive website, kamu bisa download disini.
setelah sudah di download, masukkan ke folder c://xampp/htdocs/bootstrap/js

setelah itu kita buat file index.htm dan styles.css kemudian simpan di c:xampp/htdocs/bootstrap
semua file sudah siap dan kita mulai buat navbar dengan bootstrap, edit index.htm dengan notepad++

masukkan kode seperti ini :

!DOCTYPE html>
<html>
<head>
<title>CODER JOGJA</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<!-- css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">

</div>
</div>
<!-- javascript-->
<script type="text/javascript" src = "js/jquery.js"></script>
<script type="text/javascript" src = "js/bootstrap.js"></script>
</body>
</html>

kita coba buka di browser sehingga tampilannya seperti ini :


Navbar-default


kita coba edit lagi index.htm nya, seperti ini :

<!DOCTYPE html>
<html>
<head>
<title>CODER JOGJA</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<!-- css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">CoderJogja</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar collapse-->
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About me</a></li>
</ul>
</div>
</div>
</div>
<!-- javascript-->
<script type="text/javascript" src = "js/jquery.js"></script>
<script type="text/javascript" src = "js/bootstrap.js"></script>
</body>
</html>
 ehingga tampilannya seperti ini :

Navbar-Collapse

Navbar-Collapse

ekian tutorial kali ini,, semoga bermanfa'at.. Arigatou senpai..!!
credit for coder's guide..

5/14/2015 12:57:00 am

10 Langkah Install Wordpress di Localhost

Selamat siang sobat sorry jarang update nih.. admin pingin kasih tutorial aja nih tentang instalasi wordpress secara offline siapa tau berguna buat sobat catatan-muslim semua...

wordpress offline ini bermanfa'at bagi kawan-kawan yang hobi blog tapi gak punya koneksi...

sebelum ke inti mungkin sobat perlu tau dulu apa itu wordpress.

Mengenal Wordpress


WordPress adalah salah satu cms open source atau gratis yang populer sebagai mesin blog. WordPress dibangun menggunakan pemrograman Php dan basisdata Mysql. WordPress juga mulai digunakan sebagai sebuah CMS (Content Management System) karena kemampuannya untuk dimodifikasi dan disesuaikan dengan kebutuhan penggunanya.
untuk menginstall wordpress tidak harus terhubung dengan internet, cukupjikakitamempunyai File WordPress dan XAMPP sudah cukup untuk menginstall di Localhost kita.

Apa itu Localhost

Localhost adalah Sebuah aplikasi yang memberikan fasilitas kepada penggunanya untuk dapat mengakses Local Hosting atau loopback address local komputer. Tentu ini tidak berlaku di semua komputer karena ini ada jika melakukan instalasi software semacam XAMPP, WAMP,dll.

Download Software



Jika sudah di download semua install xampp'a tinggal di klik next-next aja gampang ko.. hehe
kemudian kita ke langkah-langkah intalasi wordpress.
berikut langkah-langkah'a...

1. Buat Folder di Local disk C:/Xampp/htdocs/ dengan nama wordpress.
2. Ekstrak file wordpress ke dalam folder C:/Xampp/htdocs/wordpress.
3. Aktifkan/jalankan Xampp. buka browser dan ketikkan http://localhost/wordpress.
4. klik create a configuration file > Let’s go!
5. kemudian kita diminta memasukkan nama database, username dan password. sebelumnya kita buat dahulu databasenya,
Masuk ke http://localhost/phpmyadmin/,masukkan nama database dan pilih jenis karakter yg paling      bawah sendiri utf8_unicode_ci => create =>klik privileges =>buat user => done
6. kemudian kembali ke proses instalasi wordpress dan isikan sesuai database yang telah di buat tadi..
7. sampai disini jika berhasil akan tampil klik Run the install. dan akan tampil informasi yang dibutuhkan untuk website anda nantinya
8. klik install WordPress,dan jika berhasil akan ada tampilan bahwa insatalasi Success, dan kita diarah kan untuk login, masukkan username dan password , setelah berhasil login akan tampil Dashboard/Contol Panel wordpress kita.
9. jika sobat ingin melihat tampilan situsnya klik Visit Site,maka akan tampil web wordpress kita.
10. Wordpress siap di gunakan...Selamat Mencoba...

Demikian tutoriall tentang instalasi wordpress offline.. semoga bermanfaat




10/07/2013 11:14:00 pm
Assalamu'alaikum kawan..!!

Lama gak posting nih,, maklum admin banyak tugas kawan..,, hehehe
oke lah gpp,, sekarang admin pingin share nie tentang template blog...
keren loch template ini nantinya jika d'pakai di blog agan" serasa kaya OS windows 8,, nie screen Shoot'a :.



Selamat mencoba,, Agan2...
5/19/2013 10:28:00 pm
Apa SQL itu..??

     SQL merupakan subbahasa pemrograman yang khusus dipergunakan untuk memanipulasi basis data.

SQL adalah salah satu DBMS (database management system) yang saat ini banyak digunakan untuk operasi basis data dan embedded (ditempelkan) di hampir semua bahasa pemrograman yang mendukung basis data relasional.
Perbedaan penggunaan SQL pada masing-masing bahasa biasanya  pada sintaks2 khusus. Misalnya : INSERT INTO … VALUE. Pada bahasa yang lain INSERT INTO …VALUES…, dll.
Bahasa yang mendukung SQL antara lain : V Basic, C++ Builder,Delphi, ORACLE, MySQL,PostGreeSQL,JAVA,dll,,

Perintah-perintah dalam SQL

Perintah-perintah dalam SQL bisa disebut dengan query.
Ada tiga sub perintah:
1.  DDL -> Data Definition Language
2.  DML -> Data Manipulation Language
3.  DCL -> Data Control Language

I.    Data Definition Language

Ini adalah perintah dasar untuk membangun kerangka nya database, seperti:

CREATE: Perintah ini digunakan untuk membuat. Membuat database baru, view baru, kolom, dll.
Nanti kita bahas bagaimana cara untuk menggunakan perintah ini.
ALTER:    Perintah ini digunakan untuk mengubah strukturnya tabel yang sudah jadi sebelumnya.
Seperti mengganti nama tabel, menambah kolom, mengubah kolom, menghapus kolom,
bisa juga untuk memberikan atribut pada kolom.
DROP:       Perintah ini digunakan untuk menghapus database dan tabel.

II.    Data Manipulation Language

Ini adalah perintah untuk memanipulasi data dalam database yang sudah dibuat. Perintah-perintahnya seperti:

INSERT:    Perintah ini digunakan untuk menyisipkan atau memasukan databaru ke dalam tabel.
SELECT:    Perintah ini digunakan untuk mengambil data atau menampilkan data dari suatu tabel.
Data yang kita ambil bisa kita tampilkan dalam layar prompt MySQL secara langsung atau melalui tampilan aplikasi.
UPDATE:    Perintah ini digunakan untuk memperbarui data lama menjadi data baru.
DELETE:    Perintah ini digunakan untuk menghapus data dari tabel

1. Create Database

Pertama yang kita lakukan untuk belajar tentang SQL server yaitu membentuk pertama kali database yang akan kita gunakan untuk tempat belajar.
Perintah untuk membuat database

CREATE DATABASE TOKO
perintah diatas akan membuat database pada tempat default sql server (C:\Program Files\Microsoft SQL Server\MSSQL\Data). Untuk membentuk database dengan menentukan letak database gunakan perintah

CREATE DATABASE TOKO
ON
(
NAME = toko_dat,
FILENAME = ‘c:\Latihan SQL\Toko_Latihan.mdf’,
SIZE = 4,
MAXSIZE = 10,
FILEGROWH = 1
)
2. Create Table
Perintah SQL Server untuk membuat tabel baru digunakan
CREATE TABLE Barang
(
idbarang varchar(4) primary key ,
namabarang varchar(30),
harga money,
tanggal datetime default getdate()
)
Untuk penulisan nama table dan kolom harus diawali dengan text dan dapat diikuti dengan bilangan. Terdapat banyak pilihan Tipe data yang digunakan dalam sql server lengkapnya silahkan baca di
Dibawah ini adalah contoh untuk membuat tabel Barang
CREATE TABLE Barang
(
idbarang varchar(4) primary key ,
namabarang varchar(30),
harga money,
tanggal datetime default getdate()
)
Perintah diatas bisa dijalankan dengan sukses tapi terdapat kekurangan yaitu Bagaimana jika tabel yang kita mau buat sudah ada dalam database.Perintah sql server untuk mengabaikan jika tabel sudah ada dan membuat tabel jika tabel belum ada gunakan perintah
If Exists( SELECT Table_Name FROM Information_Schema.Tables
WHERE Table_Name = ‘Barang’ )
DROP TABLE Barang
go
Use TOKO
CREATE TABLE Barang
(
idbarang varchar(4) primary key ,
namabarang varchar(30),
harga money,
tanggal datetime default getdate()
)
Setelah membuat database dan tabel pada sql server, sekarang kita akan isi data yaitu dengan perintah
Setelah membuat database dan tabel pada sql server, sekarang kita akan isi data yaitu dengan perintah

3. Insert Table

Database Sudah terbentuk dengan 1 tabel, sekarang perintah SQL untuk isi tabel Barang
Rumus Umum Insert

Insert into[Nama_Tabel]( [Kolom1],[Kolom2],..[kolom?] )
values(isikolom1,isikolom2,..isikolom?)

Pada tabel barang terdapat nama nama field idbarang,namabarang,harga,tanggal tetapi field tanggal bernilai default getdate() yang artinya field tanggal jika diisi akan akan nilainya sesuai dengan nilai yang diberikan dan jika tidak diisi akan bernilai tanggal pada saat pengisian data.
contoh pemakaian dalam tabel Barang dengan rumus

insert into Barang(idbarang,namabarang,harga)
values(‘isi Kode Barang’,’isi Nama Barang’,’isi Harga Barang’)
jika ditambahkan field tanggal akan menjadi
insert into Barang(idbarang,namabarang,harga)
values(‘isi Kode Barang’,’isi Nama Barang’,’isi Harga Barang’)
contoh pemakaian dalam tabel Barang dengan data
insert into Barang(idbarang,namabarang,harga) values(’B001′,’Barang 1′,3500)
insert into Barang(idbarang,namabarang,harga) values(’B002′,’Barang 2′,1000)
insert into Barang(idbarang,namabarang,harga) values(’B003′,’Barang 3′,5000)
insert into Barang(idbarang,namabarang,harga) values(’B004′,’Barang 4′,7050)

4. Perintah Select

Perintah Select merupakan perintah untuk menampilkan data baik secara keseluruhan maupun dengan kondisi tertentu
menampilkan data barang secara keseluruhan gunakan perintah

Select * from Barang
Tanda * merupakan Semua Field yang ingin ditampilkan
Hasil Select * from Barang
idbarang namabarang harga tanggal
—— ————- ———– —— ——————–
B001 Barang 1 3500.0000 2007-10-14 17:17:55.153
B002 Barang 2 1000.0000 2007-10-14 17:17:55.170
B003 Barang 3 5000.0000 2007-10-14 17:17:55.170
B004 Barang 4 7050.0000 2007-10-14 17:17:55.170
B005 Barang 5 9800.0000 2007-10-14 17:17:55.170
Untuk menampilkan Field tertentu misalnya idbarang, namabarang gunakan perintah
select idbarang, namabarang from barang
Hasilnya
idbarang namabarang
——– —————
B001 Barang 1
B002 Barang 2
B003 Barang 3
B004 Barang 4
B005 Barang 5

3. Perintah Where

Setelah menggunakan perintah Select untuk menampilkan data secara keseluruhan dan untuk menampilkan data dengan kondisi tertentu digunakan perintah Select dan ditambahkan perintah where diikuti dengan kondisi yang ingin ditampilkan.
Mengetahui nama barang dengan idbarang B001 gunakan perintah
select namabarang from Barang where idbarang=’B001′
Hasilnya
namabarang
——————————
Barang 1
Menampilkan barang dengan harga 5000
select barang from Barang where harga=5000
Hasilnya
namabarang
——————————
Barang 3
Menampilkan Harga Barang dengan harga lebih besar 3000 dan lebih kecil dari 7000
select idbarang,namabarang,harga from Barang where harga>3000 and harga<7000
Hasilnya
idbarang namabarang harga
——– —————————— ———————
B001 Barang 1 3500.0000
B003 Barang 3 5000.0000
4. Function SQL
SQL Server terdapat function diantaranya Function SUM,AVG,Max,Min,Count
Contoh Pemakaian
select sum(harga) as sumharga from barang

Semoga bermanfa'at
2/15/2013 04:07:00 pm
Apa sih perbedaan Data type char & varchar..??

Pada SQL Server dikenal tipe data char dan varchar. Hal ini cukup banyak mengundang pertanyaan bagi para pemula yang sedang mempelajari SQL Server. Apa sih perbedaan diantara keduanya?

Silakan saja simak terus tulisan ini untuk mengetahui jawabannya.

Tipe data char adalah tipe data karakter yang panjangnya tetap (fixed-length). Ini artinya SQL Server akan mengalokasikan memori pada media penyimpanan untuk menyimpan tipe data ini sebesar ukuran maksimum yang kita minta. Contohnya deklarasi char(5) artinya SQL Server akan otomatis melakukan alokasi ukuran sebesar lima character pada media penyimpanan walaupun kita hanya mengisi data sebanyak tiga karakter misalnya.

Tipe data varchar adalah tipe data karakter yang panjangnya tidak tetap (variable-length). Ini berarti SQL Server akan mengalokasikan memori pada media penyimpanan hanya sebesar atau sepanjang ukuran data aktual yang diisikan. Contohnya pada saat kita mendeklarasikan varchar(5) dan pada field tersebut kita isi 3 karakter maka pada media penyimpanan hanya akan dialokasikan sebesar 3 karakter saja.

Dari sini kita bisa menentukan kapan harus menggunakan tipe data char atau varchar. Tipe data char digunakan pada field atau data yang sifat panjangnya tetap, misalnya seperti kode barang, kode item, kode customer dan lain lain yang panjangnya tetap.
Sebaliknya Anda bisa menggunakan varchar untuk data atau field yang sifat panjangnya tidak tetap misalnya nama, alamat, kota, deskripsi dan lain sebagainya. Jadi pilihlah tipe data yang tepat pada saat Anda membuat field-field pada database Anda.

Semoga bermanfa'at
2/15/2013 03:36:00 pm
Assalamu'alaikum kawan..!!
gimana nie kabarnya lama gak posting nie,, kali ini ane mau posting tentang twiit bird.. gimana ya caranya biar si burung biru ini berterbangan kesana kemari di blog kita,,
bagi kawan kawan yang mau tau gimana caranya,,: nie ane ada sedikit ilmu..

mau tau,, nie ikutain langkah"nya..

1. kawan-kawan harus login dulu ke blogger -- layout (rancangan) -- add gadget.. udah..??
    kalau udah.. lanjut
2. Klick Html/javascript teruss
3. Copy script berikut ::

<script type="text/javascript"    src="https://sites.google.com/site/exeloph/file/Twitterbang.js"></script>
<script type="text/javascript">
var            birdSprite="https://lh3.googleusercontent.com/_6TkGtddC4V4/TWCplect9lI/AAAAAAAAADI/6tK12S_   REt8/bluetwit.png"; var targetElems=new   Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/muslim_jogja";var tweetThisText = "Twitter - bayumuslim http://catatan-cahmuslim.blogspot.com/";tripleflapInit();</script>
yang warna merah bisa kamu ganti dengan ID-twittermu  n alamat blog kamu,, terus kamu save,, jadi dech si burung biru berterbangan di blog kamu...

selamat mencoba
2/15/2013 02:06:00 am



Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. 
Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain. 
Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena itu, kadang para blogger menghapus NavBar tersebut. Pertanyaannya adalah: Apa tidak melanggar Term of Service (TOS) dari Blogger.com?

Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga mendapat teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga tidak ada aturan yang cukup detail tentang hal ini.
Nah, bagaimana menghilangkan Navigation Bar?
Ada beberapa penyedia template yang memang sudah tidak ada NavBar-nya. Namun bagi kamu yang memakai template yang masih ada NavBarnya dan ingin menghilangkannya maka inilah caranya.
1. Kamu harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut ke dalam tag head

#navbar-iframe {
display: none !important;
}
contohnya sebagai berikut :
-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Kemudian simpan.

Selamat Mencoba.....!!

2/14/2013 08:19:00 am
Copyright © 2015 Coders Jogja | Designed by VeeThemes.com