Minggu, 06 Oktober 2013

Membuat Template Joomla

Joomla Membuat Template 2

Oke, saatnya tutorial membuat template joomla dimulai...
  Tutorial ini ditujukan buat pemula, jadi bakal dikenalkan dasar-dasar HTML, CSS dan integrasinya ke Joomla CMS. 
Langkah yang dipakai ini bukan langkah baku lho, masing2 desainer bisa punya cara yang berbeda2, ini cara yang penulis gunakan, kalau mau mengembangkan sendiri bebas.
 
Langkah 1:
Desain di Photoshop
Desain web sebaiknya dimulai dari pembuatan desainnya di photoshop. tujuannya supaya kita punya panduan untuk code-nya. ada juga beberapa coder yang langsung code ke HTML/CSS, tapi untuk desain yg lebih sempurna dan mempercepat proses sebaiknya desain dulu deh.
ini saya lampirkan desain JPG untuk proyek situs sekolah, dinamain aja smk tobacamp.
(klik gambar untuk melihat ukuran lebih besar) 
Langkah 2:
Slice
Setelah selesai desain, kita bisa melakukan proses slicing gambar di PSD tadi menjadi kepingan2 kecil, dalam format JPG, GIF atau PNG.
Gambar2 yang berulang, seperti background di slice tipis saja, kalau bisa bahkan sampai lebar cuma 1pixel.
Saya biasa melakukan slice menggunakan ADOBE IMAGEREADY. 
 
Langkah 3:
Packing
Buat folder khusus di directory kita, misalnya saya namakan smktobacamp.
di dalam folder itu terdapat folder CSS dan IMAGES. simpan semua gambar hasil slice tadi ke dalam folde IMAGES.
 
Langkah 4:
Code HTML/CSS
Saya menggunakan DREAMWEAVER untuk mengcode  html dan css, supaya serasi dengan joomla nantinya, saya buat file template dengan nama index.html dan template_css.css (file css disimpan dalam folder css).
dari dreamweaver create new HTML page.
 
Secara otomatis, dreamweaver bakal menulis searngkaian tag html standar, seperti <html><head> dan <body> termasuk tag penutupnya.
 
Langkah 5:
Tableless Design
Saat ini desain html sudah mengenal penggunaan tableless design, alias desain tanpa menggunakan tabel samasekali. penggunaan table dalam desain layout html dianggap kuno dan bermasalah. situs generasi baru saat ini sudah tidak memakau table lagi tapi full desain layout dari CSS.
tutorial ini juga tidak menggunakan table.
untuk menentukan layout standar kita pakai LAYER dengan tag <DIV ></DIV>
 
Langkah 6:
Mempelajari desain Photoshop.
sebelum mengerjakan code, paling baik adalah mempelajari hasil desain kita, jangan main hajar langsung ke code. coba perhatikan file desain tadi, kira2 kalau kita mau membagi desain kedalam kerangka, kita harus memikirkan perlahan pembagian areal layernya.
Sebagai contoh desain smktobacamp tadi, analisanya:
 
1. Bagian utama Situs terletak di tengah, semua elemen lainnya perlu ditampung dalam 1 buah layer utama dan terluar. kita namakan layer ini OUTERLAYER, di layer ini seluruh layer lainnya ditampung.  Berhubung desain kita mengambang di tengah, maka kita tambahkan satu layer lainnya CONTAINER yang akan menempatkan diri di tengah browser.
 
2. Dibagian paling atas, ada layer untuk menampung logo dan nama sekolah. ini adalah satu buah layer paling atas dinamakan layer HEADER dan berada di dalam layer CONTAINER.
 
3. dibawah logo, ada tempat untuk meletakkan link utama kita, layer ini kita namakan MENUTOP.
 
4. Dibawah menu tadi, adalah content/isi utama situs kita yang nantinya diisi dengan artikel dan modul2 dari joomla. secara layout, bagian itu terbagi 2 buah areal, sebelah kiri -kita namakan CONTENTLEFT dan sebelah kanan kita namakan CONTENTRIGHT, kedua layer ini kita tampung dalam layer MAINCONTENT.
 
5.  Didalam CONTENTLEFT terbagi 2 layer utama juga, yaitu area untuk visi dan misi -rencananya nanti setelah integrasi ke joomla kita jadikan slideshow, layer ini kita namakan HIGHLIGHT, dibawahnya baru untuk berita/artikel utama, kita namakan layer NEWSCONTENT.
 
6. Dibawah NEWSCONTENT terdapat 2 buah module untuk menampilkan berita, karena kedua box module itu sama dari segi desain, ukuran dan warna, maka kita jadikan layer dengan class (nanti dibahas) namanya NEWSMODULE , dan keduanya ditampung dalam layer MODULEBOTTOM.
 
7. disebelah kanan, yaitu di dalam layer CONTENTRIGHT terdapat (saat ini, nanti bisa saja lebih) 3 kotak modul, kita namakan NEWSMODULE2 dan box ketiga berbeda desain kita namakan NEWSMODULE3. ingat, NEWSMODULE2 dan NEWSMODULE3 terdapat dalam layer CONTENTRIGHT.
 
8. terakhir di bagian bawah terdapat tulisan copyright, kita namakan layer FOOTER.
layer ini terletak sesudah   layer MAINCONTENT, dan tetap bagian dari layer CONTAINER.
 
9. Kerangka terluar sudah siap.
 
10. silakan ketik code kedalam file index.html sbb:
 
 <body>
<div id="outerlayer">
<div id="container">
        <div id="header"> </div>
        <div id="menutop"></div>
        <div id="maincontent">
            <div id="contentleft">
                <div id="highlight"></div>
                <div id="newscontent"></div>
                <div id="modulebottom">
                    <div class="newsmodule"></div>
                    <div class="newsmodule"></div>
                </div>
        </div>
        <div id="contentright">
             <div class="newsmodule2"></div>
             <div class="newsmodule2"></div>
            <div class="newsmodule3"></div>
        </div>
    </div>
    <div id="footer"></div>
</div>
</div>
</body> 
 
ID adalah nama pengenal masing-masing layer. ada layer yang menggunakan CLASS karena layer ID hanya boleh digunakan satu kali dalam file HTML sedangkanCLASS boleh digunakan berulang2, jadi NEWSMODULE memang akan digunakan berulang2 maka dijadikan class.
 
Layer ini nantinya akan ditambahkan dengan layer2 lain seperlunya atau mungkin juga dihilangkan. seiring pengerjaan. 
selesai... bersambung ke bagian 3.

Jumat, 04 Oktober 2013

Motivasi Hidupku

Aku pasti bisa mewujudkan impianku itu.jika ada orang yang bisa melakukan hal itu,aku pun pasti bisa melakukannya. Thomas Alpha Edison juga pernah mengalami kegagalan sebanyak 9999 kali. Meski begitu,dia terus berusaha mewujudkan impiannya.
Memang benar orang-orang sukses itu mendapatkan nasib mujur. Namun, mereka sendirilah yang menciptakan nasib mujur itu. Mereka mewujudkannya dengan kerja keras. Semangat mereka untuk bekerja sangat tinggi sehingga mereka menjadi yang terbaik dalam berkarya.
Hiduplah setiap saat, seakan ia adalah akhir dari kehidupan anda.
Hiduplah dengan selalu membawa keyakinan dan harapan.
Hiduplah dengan semangat cinta dan perjuangan.
Hargailah hidup anda!
sumber buku DR.IBRAHIM ELFIKY

Pengertia Variabel

ditulis oleh jeeaq's rasta

Kamis, 03 Oktober 2013

Contoh Algoritma Luas Persegi Panjang

Algoritma Luas_PersegiPanjang

Deklarasi
Panjang, Lebar, Luas : Integer
Deskripsi
Read (Panjang, Lebar)
Luas ← Panjang * Lebar
Write (Luas)

Bahasa pascal 

Program Luas_Persegi_Panjang;
Uses WinCrt;
Var
p,l,Luas : Integer;
Begin
Write('Panjang persegi Panjang ='); Readln(p);
Write('Lebar persegi Panjang ='); Readln(l);

Luas:=p*l;

Writeln;
Writeln;
Writeln('**************************');
Writeln('Luas persegi Panjang =',Luas);
Writeln('**************************');
End.
http://arliyanatik.blogspot.com 

Tipe Data dalam Bahasa Pemrograman C

Tipe Data Dalam Bahasa Pemrograman C 

Di dalam program C, data harus menuruti aturan suatu tipe data yang dikenal oleh bahasa pemrograman C. Dengan demikian, semua data di dalam program harus dibawa ke tipe data yang sesuai. Data Berdasar jenisnya dapat dibagi menjadi 4 tipe dasar, yaitu: 
1. Tipe Integer Variabel yang bertipe integer digunakan untuk menyimpan data bernilai bulat. tipe int(%d atau %i) 
2. Tipe Float Variable tipe float digunakan untuk menyimpan data bernilai real. 
3. Tipe Char Digunakan untuk menyimpan data berupa karakter, yakni berupa huruf, simbol dan angka.
4. Tipe tak bertipe (void) Variabel ini digunakan apabila suatu fungsi tidak menghasilkan nilai